You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/01/04 16:20:08 UTC

[royale-asjs] branch develop updated: tour-de-jewel: copy secondary 12 themes (light-noflat) to Tour De Jewel

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 3961f96  tour-de-jewel: copy secondary 12 themes (light-noflat) to Tour De Jewel
3961f96 is described below

commit 3961f9682ae77c999de26854c8d8143e89cfe488
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jan 4 17:18:53 2020 +0100

    tour-de-jewel: copy secondary 12 themes (light-noflat) to Tour De Jewel
---
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../defaults.css                                   | 201 +++++++++++++++++++++
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 .../pom.xml                                        |  10 +
 24 files changed, 2532 insertions(+)

diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/defaults.css
new file mode 100644
index 0000000..dad35d7
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #C92CC6;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#d43bd1, #b427b1);
+  border: 1px solid #8a1e88;
+  box-shadow: inset 0 1px 0 #e279e0;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#C92CC6, #9f239d);
+  border: 1px solid #751a74;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#9f239d, #751a74);
+  border: 1px solid #4b114a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #8a1e88;
+  box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #da58d8;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #d643d3;
+}
+
+.jewel.item.secondary.hovered {
+  background: #C92CC6;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #b427b1;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#d43bd1, #b427b1);
+  border: 1px solid #8a1e88;
+  box-shadow: inset 0 1px 0 #e279e0;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#C92CC6, #9f239d);
+}
+
+a:visited {
+  color: #9f239d;
+}
+
+a:hover {
+  color: #C92CC6;
+}
+
+a:active {
+  color: #d94fd6;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#d43bd1, #b427b1);
+  border: 1px solid #8a1e88;
+  box-shadow: inset 0 1px 0 #e279e0;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#C92CC6, #9f239d);
+  border: 1px solid #751a74;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#9f239d, #751a74);
+  border: 1px solid #4b114a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #8a1e88;
+  box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#9f239d, #751a74);
+  border: 1px solid #4b114a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/defaults.css
new file mode 100644
index 0000000..1579d0e
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #3CADF1;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#54b7f3, #24a3ef);
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0 1px 0 #9bd5f8;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#3CADF1, #1198e9);
+  border: 1px solid #0d79ba;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#1198e9, #0d79ba);
+  border: 1px solid #0a5a8a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #75c5f5;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #5dbbf3;
+}
+
+.jewel.item.secondary.hovered {
+  background: #3CADF1;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #24a3ef;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#54b7f3, #24a3ef);
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0 1px 0 #9bd5f8;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#3CADF1, #1198e9);
+}
+
+a:visited {
+  color: #1198e9;
+}
+
+a:hover {
+  color: #3CADF1;
+}
+
+a:active {
+  color: #6cc1f4;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#54b7f3, #24a3ef);
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0 1px 0 #9bd5f8;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#3CADF1, #1198e9);
+  border: 1px solid #0d79ba;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#1198e9, #0d79ba);
+  border: 1px solid #0a5a8a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#1198e9, #0d79ba);
+  border: 1px solid #0a5a8a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/defaults.css
new file mode 100644
index 0000000..3bd8d10
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #8CC63C;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#98cc50, #7eb435);
+  border: 1px solid #638c29;
+  box-shadow: inset 0 1px 0 #bbdd8b;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#8CC63C, #71a02f);
+  border: 1px solid #557923;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#71a02f, #557923);
+  border: 1px solid #395118;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #638c29;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #a8d46b;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #9cce58;
+}
+
+.jewel.item.secondary.hovered {
+  background: #8CC63C;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #7eb435;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#98cc50, #7eb435);
+  border: 1px solid #638c29;
+  box-shadow: inset 0 1px 0 #bbdd8b;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#8CC63C, #71a02f);
+}
+
+a:visited {
+  color: #71a02f;
+}
+
+a:hover {
+  color: #8CC63C;
+}
+
+a:active {
+  color: #a3d263;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#98cc50, #7eb435);
+  border: 1px solid #638c29;
+  box-shadow: inset 0 1px 0 #bbdd8b;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#8CC63C, #71a02f);
+  border: 1px solid #557923;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#71a02f, #557923);
+  border: 1px solid #395118;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #638c29;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#71a02f, #557923);
+  border: 1px solid #395118;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/defaults.css
new file mode 100644
index 0000000..eaa1b3c
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #3AB549;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#45c354, #34a241);
+  border: 1px solid #277b32;
+  box-shadow: inset 0 1px 0 #7fd68a;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#3AB549, #2e8e39);
+  border: 1px solid #21682a;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#2e8e39, #21682a);
+  border: 1px solid #15411a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #277b32;
+  box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #60cc6d;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #4dc65c;
+}
+
+.jewel.item.secondary.hovered {
+  background: #3AB549;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #34a241;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#45c354, #34a241);
+  border: 1px solid #277b32;
+  box-shadow: inset 0 1px 0 #7fd68a;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#3AB549, #2e8e39);
+}
+
+a:visited {
+  color: #2e8e39;
+}
+
+a:hover {
+  color: #3AB549;
+}
+
+a:active {
+  color: #58ca66;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#45c354, #34a241);
+  border: 1px solid #277b32;
+  box-shadow: inset 0 1px 0 #7fd68a;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#3AB549, #2e8e39);
+  border: 1px solid #21682a;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#2e8e39, #21682a);
+  border: 1px solid #15411a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #277b32;
+  box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#2e8e39, #21682a);
+  border: 1px solid #15411a;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/defaults.css
new file mode 100644
index 0000000..c3f0ca8
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #F7941D;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#f8a036, #f28809);
+  border: 1px solid #c16c07;
+  box-shadow: inset 0 1px 0 #fac380;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#F7941D, #d97a08);
+  border: 1px solid #a85e06;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#d97a08, #a85e06);
+  border: 1px solid #774304;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #c16c07;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #f9b058;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #f8a43f;
+}
+
+.jewel.item.secondary.hovered {
+  background: #F7941D;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #f28809;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#f8a036, #f28809);
+  border: 1px solid #c16c07;
+  box-shadow: inset 0 1px 0 #fac380;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#F7941D, #d97a08);
+}
+
+a:visited {
+  color: #d97a08;
+}
+
+a:hover {
+  color: #F7941D;
+}
+
+a:active {
+  color: #f9ab4e;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#f8a036, #f28809);
+  border: 1px solid #c16c07;
+  box-shadow: inset 0 1px 0 #fac380;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#F7941D, #d97a08);
+  border: 1px solid #a85e06;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#d97a08, #a85e06);
+  border: 1px solid #774304;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #c16c07;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#d97a08, #a85e06);
+  border: 1px solid #774304;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/defaults.css
new file mode 100644
index 0000000..16e9c2f
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #EC1C24;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#ee343b, #dc121a);
+  border: 1px solid #ad0e15;
+  box-shadow: inset 0 1px 0 #f47a7f;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#EC1C24, #c51017);
+  border: 1px solid #950d12;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#c51017, #950d12);
+  border: 1px solid #66090c;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #ad0e15;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #f1545a;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #ef3d44;
+}
+
+.jewel.item.secondary.hovered {
+  background: #EC1C24;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #dc121a;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#ee343b, #dc121a);
+  border: 1px solid #ad0e15;
+  box-shadow: inset 0 1px 0 #f47a7f;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#EC1C24, #c51017);
+}
+
+a:visited {
+  color: #c51017;
+}
+
+a:hover {
+  color: #EC1C24;
+}
+
+a:active {
+  color: #f04b51;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#ee343b, #dc121a);
+  border: 1px solid #ad0e15;
+  box-shadow: inset 0 1px 0 #f47a7f;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#EC1C24, #c51017);
+  border: 1px solid #950d12;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#c51017, #950d12);
+  border: 1px solid #66090c;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #ad0e15;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#c51017, #950d12);
+  border: 1px solid #66090c;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/defaults.css
new file mode 100644
index 0000000..3e1bf77
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #2C74BE;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#3481d0, #2767a9);
+  border: 1px solid #1e4e80;
+  box-shadow: inset 0 1px 0 #72a7de;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#2C74BE, #225b95);
+  border: 1px solid #19416b;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#225b95, #19416b);
+  border: 1px solid #0f2842;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #1e4e80;
+  box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #5193d7;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #3c86d2;
+}
+
+.jewel.item.secondary.hovered {
+  background: #2C74BE;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #2767a9;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#3481d0, #2767a9);
+  border: 1px solid #1e4e80;
+  box-shadow: inset 0 1px 0 #72a7de;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#2C74BE, #225b95);
+}
+
+a:visited {
+  color: #225b95;
+}
+
+a:hover {
+  color: #2C74BE;
+}
+
+a:active {
+  color: #488ed5;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#3481d0, #2767a9);
+  border: 1px solid #1e4e80;
+  box-shadow: inset 0 1px 0 #72a7de;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#2C74BE, #225b95);
+  border: 1px solid #19416b;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#225b95, #19416b);
+  border: 1px solid #0f2842;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #1e4e80;
+  box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#225b95, #19416b);
+  border: 1px solid #0f2842;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/defaults.css
new file mode 100644
index 0000000..3e37525
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #F8B13F;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#f9bb58, #f7a726);
+  border: 1px solid #e28f08;
+  box-shadow: inset 0 1px 0 #fcd9a1;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#F8B13F, #f69d0e);
+  border: 1px solid #ca7f07;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#f69d0e, #ca7f07);
+  border: 1px solid #986006;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #e28f08;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #fac97a;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #f9bf61;
+}
+
+.jewel.item.secondary.hovered {
+  background: #F8B13F;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #f7a726;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#f9bb58, #f7a726);
+  border: 1px solid #e28f08;
+  box-shadow: inset 0 1px 0 #fcd9a1;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#F8B13F, #f69d0e);
+}
+
+a:visited {
+  color: #f69d0e;
+}
+
+a:hover {
+  color: #F8B13F;
+}
+
+a:active {
+  color: #fac570;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#f9bb58, #f7a726);
+  border: 1px solid #e28f08;
+  box-shadow: inset 0 1px 0 #fcd9a1;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#F8B13F, #f69d0e);
+  border: 1px solid #ca7f07;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#f69d0e, #ca7f07);
+  border: 1px solid #986006;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #e28f08;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#f69d0e, #ca7f07);
+  border: 1px solid #986006;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/defaults.css
new file mode 100644
index 0000000..75c96b4
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #EF5A2A;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#f16c42, #ed4812);
+  border: 1px solid #be390e;
+  box-shadow: inset 0 1px 0 #f6a389;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#EF5A2A, #d64010);
+  border: 1px solid #a6320d;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#d64010, #a6320d);
+  border: 1px solid #772409;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #be390e;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #f38663;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #f1744b;
+}
+
+.jewel.item.secondary.hovered {
+  background: #EF5A2A;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #ed4812;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#f16c42, #ed4812);
+  border: 1px solid #be390e;
+  box-shadow: inset 0 1px 0 #f6a389;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#EF5A2A, #d64010);
+}
+
+a:visited {
+  color: #d64010;
+}
+
+a:hover {
+  color: #EF5A2A;
+}
+
+a:active {
+  color: #f37f59;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#f16c42, #ed4812);
+  border: 1px solid #be390e;
+  box-shadow: inset 0 1px 0 #f6a389;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#EF5A2A, #d64010);
+  border: 1px solid #a6320d;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#d64010, #a6320d);
+  border: 1px solid #772409;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #be390e;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#d64010, #a6320d);
+  border: 1px solid #772409;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/defaults.css
new file mode 100644
index 0000000..046489f
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #29A89F;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#2ebcb2, #24948c);
+  border: 1px solid #1a6b65;
+  box-shadow: inset 0 1px 0 #5fd8cf;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#29A89F, #1f7f78);
+  border: 1px solid #155651;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#1f7f78, #155651);
+  border: 1px solid #0b2d2b;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #1a6b65;
+  box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #3ed0c6;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #30c5ba;
+}
+
+.jewel.item.secondary.hovered {
+  background: #29A89F;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #24948c;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#2ebcb2, #24948c);
+  border: 1px solid #1a6b65;
+  box-shadow: inset 0 1px 0 #5fd8cf;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#29A89F, #1f7f78);
+}
+
+a:visited {
+  color: #1f7f78;
+}
+
+a:hover {
+  color: #29A89F;
+}
+
+a:active {
+  color: #36cec3;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#2ebcb2, #24948c);
+  border: 1px solid #1a6b65;
+  box-shadow: inset 0 1px 0 #5fd8cf;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#29A89F, #1f7f78);
+  border: 1px solid #155651;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#1f7f78, #155651);
+  border: 1px solid #0b2d2b;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #1a6b65;
+  box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#1f7f78, #155651);
+  border: 1px solid #0b2d2b;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/defaults.css
new file mode 100644
index 0000000..492b103
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #662C90;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#7432a4, #58267c);
+  border: 1px solid #3c1a55;
+  box-shadow: inset 0 1px 0 #9a56cc;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#662C90, #4a2069);
+  border: 1px solid #2f1442;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#4a2069, #2f1442);
+  border: 1px solid #13081b;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #3c1a55;
+  box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #873abf;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #7934ab;
+}
+
+.jewel.item.secondary.hovered {
+  background: #662C90;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #58267c;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#7432a4, #58267c);
+  border: 1px solid #3c1a55;
+  box-shadow: inset 0 1px 0 #9a56cc;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#662C90, #4a2069);
+}
+
+a:visited {
+  color: #4a2069;
+}
+
+a:hover {
+  color: #662C90;
+}
+
+a:active {
+  color: #8238b7;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#7432a4, #58267c);
+  border: 1px solid #3c1a55;
+  box-shadow: inset 0 1px 0 #9a56cc;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#662C90, #4a2069);
+  border: 1px solid #2f1442;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#4a2069, #2f1442);
+  border: 1px solid #13081b;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #3c1a55;
+  box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#4a2069, #2f1442);
+  border: 1px solid #13081b;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/defaults.css
new file mode 100644
index 0000000..696a662
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/defaults.css
@@ -0,0 +1,201 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+j|Application {
+  background: white;
+  font-family: "Lato", sans-serif;
+  color: #808080;
+  padding: 0px;
+  margin: 0px;
+}
+
+input, select, textarea, button {
+  font-family: inherit;
+}
+
+j|Form {
+  gap: 3;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+span {
+  font-size: 1em;
+}
+
+div {
+  font-size: 14px;
+}
+
+hr {
+  background-color: #d9d9d9;
+}
+
+.jewel.xsmall {
+  font-size: 0.6em;
+}
+
+.jewel.small {
+  font-size: 0.8em;
+}
+
+.jewel {
+  font-size: 1em;
+}
+
+.jewel.large {
+  font-size: 1.2em;
+}
+
+.jewel.xlarge {
+  font-size: 1.4em;
+}
+
+.jewel.imagebutton {
+  outline: 0;
+}
+
+.jewel.badge.secondary {
+  background: #E2D70B;
+  color: #FFFFFF;
+}
+
+.jewel.button.secondary {
+  background: linear-gradient(#f4e813, #cac00a);
+  border: 1px solid #999207;
+  box-shadow: inset 0 1px 0 #f7ef5c;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
+}
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
+  background: linear-gradient(#E2D70B, #b1a909);
+  border: 1px solid #817a06;
+}
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
+  background: linear-gradient(#b1a909, #817a06);
+  border: 1px solid #504c04;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  border: 1px solid #999207;
+  box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.button.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
+  background: #f5eb35;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.selectable:active {
+  background: #f4e91d;
+}
+
+.jewel.item.secondary.hovered {
+  background: #E2D70B;
+}
+.jewel.item.secondary.selected, .jewel.item.secondary.selectable:active {
+  background: #cac00a;
+}
+
+.jewel.snackbar.secondary .jewel.snackbar-content {
+  background: linear-gradient(#f4e813, #cac00a);
+  border: 1px solid #999207;
+  box-shadow: inset 0 1px 0 #f7ef5c;
+  border-bottom: none;
+}
+.jewel.snackbar.secondary .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.secondary .jewel.snackbar-action:hover {
+  background: linear-gradient(#E2D70B, #b1a909);
+}
+
+a:visited {
+  color: #b1a909;
+}
+
+a:hover {
+  color: #E2D70B;
+}
+
+a:active {
+  color: #f5ea2b;
+}
+
+.jewel.togglebutton.secondary {
+  background: linear-gradient(#f4e813, #cac00a);
+  border: 1px solid #999207;
+  box-shadow: inset 0 1px 0 #f7ef5c;
+  border-radius: 3px;
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
+}
+.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus {
+  background: linear-gradient(#E2D70B, #b1a909);
+  border: 1px solid #817a06;
+}
+.jewel.togglebutton.secondary:active, .jewel.togglebutton.secondary:active:focus {
+  background: linear-gradient(#b1a909, #817a06);
+  border: 1px solid #504c04;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.togglebutton.secondary:focus {
+  border: 1px solid #999207;
+  box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.togglebutton.secondary[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.secondary.selected {
+  background: linear-gradient(#b1a909, #817a06);
+  border: 1px solid #504c04;
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml
index 38fef31..cac8918 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml
index 69342db..cd0708d 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml
index b1454a2..4c12c11 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml
index 49c2d84..2bb8397 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Green-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml
index 4fb82e5..d4d37c4 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml
index 66645ab..5ace0e5 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Red-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml
index 9a6878f..c4fe543 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml
index 238bb33..3ba6cc3 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml
index b91c392..45ab750 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml
index c410b23..0a135bb 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml
index cf39310..ca74d25 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml
index c021ce5..d3e727f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml
@@ -69,6 +69,16 @@
                 </source>
                 <destination>${basedir}/src/main/resources</destination>
             </resource>
+            <!-- Create a copy for TourDeJewel so we can change themes dinamicaly -->
+            <resource>
+                <source>
+                    <directory>${basedir}/src/main/sass</directory>
+                    <includes>
+                        <include>defaults.sass</include>
+                    </includes>
+                </source>
+                <destination>${basedir}/../../../examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>