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 19:03:47 UTC

[royale-asjs] branch develop updated: tour-de-jewel: copy emphasized 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 6b28f7e  tour-de-jewel: copy emphasized 12 themes (light-noflat) to Tour De Jewel
6b28f7e is described below

commit 6b28f7e37afe9a1a886c378a456391f51a9edf5a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jan 4 20:03:38 2020 +0100

    tour-de-jewel: copy emphasized 12 themes (light-noflat) to Tour De Jewel
---
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../defaults.css                                   | 189 +++++++++++++++++++++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 .../pom.xml                                        |  10 ++
 24 files changed, 2388 insertions(+)

diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/defaults.css
new file mode 100644
index 0000000..7f94a50
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #C92CC6;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#C92CC6, #9f239d);
+  border: 1px solid #751a74;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #da58d8;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #d643d3;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #C92CC6;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #b427b1;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#d43bd1, #b427b1);
+  border: 1px solid #8a1e88;
+  box-shadow: inset 0 1px 0 #e279e0;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#C92CC6, #9f239d);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#C92CC6, #9f239d);
+  border: 1px solid #751a74;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Blue-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/defaults.css
new file mode 100644
index 0000000..cf3799b
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #3CADF1;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#3CADF1, #1198e9);
+  border: 1px solid #0d79ba;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #75c5f5;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #5dbbf3;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #3CADF1;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #24a3ef;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#54b7f3, #24a3ef);
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0 1px 0 #9bd5f8;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#3CADF1, #1198e9);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#3CADF1, #1198e9);
+  border: 1px solid #0d79ba;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Emerald-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/defaults.css
new file mode 100644
index 0000000..90228d0
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #8CC63C;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#8CC63C, #71a02f);
+  border: 1px solid #557923;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #a8d46b;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #9cce58;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #8CC63C;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #7eb435;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#98cc50, #7eb435);
+  border: 1px solid #638c29;
+  box-shadow: inset 0 1px 0 #bbdd8b;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#8CC63C, #71a02f);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#8CC63C, #71a02f);
+  border: 1px solid #557923;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Green-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/defaults.css
new file mode 100644
index 0000000..c2d02d5
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #3AB549;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#3AB549, #2e8e39);
+  border: 1px solid #21682a;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #60cc6d;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #4dc65c;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #3AB549;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #34a241;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#45c354, #34a241);
+  border: 1px solid #277b32;
+  box-shadow: inset 0 1px 0 #7fd68a;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#3AB549, #2e8e39);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#3AB549, #2e8e39);
+  border: 1px solid #21682a;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Orange-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/defaults.css
new file mode 100644
index 0000000..2ee47c5
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #F7941D;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#F7941D, #d97a08);
+  border: 1px solid #a85e06;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #f9b058;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #f8a43f;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #F7941D;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #f28809;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#f8a036, #f28809);
+  border: 1px solid #c16c07;
+  box-shadow: inset 0 1px 0 #fac380;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#F7941D, #d97a08);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#F7941D, #d97a08);
+  border: 1px solid #a85e06;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Red-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/defaults.css
new file mode 100644
index 0000000..c9c0480
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #EC1C24;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#EC1C24, #c51017);
+  border: 1px solid #950d12;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #f1545a;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #ef3d44;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #EC1C24;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #dc121a;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#ee343b, #dc121a);
+  border: 1px solid #ad0e15;
+  box-shadow: inset 0 1px 0 #f47a7f;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#EC1C24, #c51017);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#EC1C24, #c51017);
+  border: 1px solid #950d12;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Sapphire-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/defaults.css
new file mode 100644
index 0000000..a7ddc90
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #2C74BE;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#2C74BE, #225b95);
+  border: 1px solid #19416b;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #5193d7;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #3c86d2;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #2C74BE;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #2767a9;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#3481d0, #2767a9);
+  border: 1px solid #1e4e80;
+  box-shadow: inset 0 1px 0 #72a7de;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#2C74BE, #225b95);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#2C74BE, #225b95);
+  border: 1px solid #19416b;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Sunflower-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/defaults.css
new file mode 100644
index 0000000..f2819a2
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #F8B13F;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#F8B13F, #f69d0e);
+  border: 1px solid #ca7f07;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #fac97a;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #f9bf61;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #F8B13F;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #f7a726;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#f9bb58, #f7a726);
+  border: 1px solid #e28f08;
+  box-shadow: inset 0 1px 0 #fcd9a1;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#F8B13F, #f69d0e);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#F8B13F, #f69d0e);
+  border: 1px solid #ca7f07;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Topaz-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/defaults.css
new file mode 100644
index 0000000..4433e9f
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #EF5A2A;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#EF5A2A, #d64010);
+  border: 1px solid #a6320d;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #f38663;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #f1744b;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #EF5A2A;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #ed4812;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#f16c42, #ed4812);
+  border: 1px solid #be390e;
+  box-shadow: inset 0 1px 0 #f6a389;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#EF5A2A, #d64010);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#EF5A2A, #d64010);
+  border: 1px solid #a6320d;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Turquoise-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/defaults.css
new file mode 100644
index 0000000..fac4363
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #29A89F;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#29A89F, #1f7f78);
+  border: 1px solid #155651;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #3ed0c6;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #30c5ba;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #29A89F;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #24948c;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#2ebcb2, #24948c);
+  border: 1px solid #1a6b65;
+  box-shadow: inset 0 1px 0 #5fd8cf;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#29A89F, #1f7f78);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#29A89F, #1f7f78);
+  border: 1px solid #155651;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Violet-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/defaults.css
new file mode 100644
index 0000000..3bb5530
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #662C90;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#662C90, #4a2069);
+  border: 1px solid #2f1442;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #873abf;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #7934ab;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #662C90;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #58267c;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#7432a4, #58267c);
+  border: 1px solid #3c1a55;
+  box-shadow: inset 0 1px 0 #9a56cc;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#662C90, #4a2069);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#662C90, #4a2069);
+  border: 1px solid #2f1442;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Yellow-Theme/defaults.css b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/defaults.css
new file mode 100644
index 0000000..1c5d273
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/resources/assets/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/defaults.css
@@ -0,0 +1,189 @@
+/*!
+ *  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";
+.jewel.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.emphasized {
+  background: #E2D70B;
+  color: #FFFFFF;
+}
+
+.jewel.button.emphasized {
+  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.emphasized:hover, .jewel.button.emphasized:hover:focus {
+  background: linear-gradient(#E2D70B, #b1a909);
+  border: 1px solid #817a06;
+}
+.jewel.button.emphasized:active, .jewel.button.emphasized: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.emphasized: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.emphasized[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.emphasized.hovered {
+  background: #f5eb35;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.selectable:active {
+  background: #f4e91d;
+}
+
+.jewel.item.emphasized.hovered {
+  background: #E2D70B;
+}
+.jewel.item.emphasized.selected, .jewel.item.emphasized.selectable:active {
+  background: #cac00a;
+}
+
+.jewel.snackbar.emphasized .jewel.snackbar-content {
+  background: linear-gradient(#f4e813, #cac00a);
+  border: 1px solid #999207;
+  box-shadow: inset 0 1px 0 #f7ef5c;
+  border-bottom: none;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-message {
+  color: #FFFFFF;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action {
+  color: #E2D70B;
+}
+.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
+  background: linear-gradient(#E2D70B, #b1a909);
+}
+
+.jewel.togglebutton.emphasized {
+  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.emphasized:hover, .jewel.togglebutton.emphasized:hover:focus {
+  background: linear-gradient(#E2D70B, #b1a909);
+  border: 1px solid #817a06;
+}
+.jewel.togglebutton.emphasized:active, .jewel.togglebutton.emphasized: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.emphasized: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.emphasized[disabled] {
+  background: #f3f3f3 !important;
+  border: 1px solid #d9d9d9 !important;
+  box-shadow: none !important;
+  color: silver;
+  text-shadow: unset;
+}
+.jewel.togglebutton.emphasized.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-Emphasized-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/pom.xml
index 3de39a3..c7500f1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Amethyst-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml
index dfe5682..9a952fb 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Blue-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml
index e826d8a..802401e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Emerald-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml
index d200ffe..6eb24fa 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Green-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml
index 74f16fa..e8dd37c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Orange-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml
index 84b0fd3..600c988 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Red-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml
index 78c9308..608f0d3 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Sapphire-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml
index 9911879..5af808f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Sunflower-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml
index 6e1e078..9543783 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Topaz-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml
index c55c6c2..bcbc5a4 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Turquoise-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml
index 452c605..da676bb 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Violet-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml
index d91e681..d2e935c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-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-Emphasized-Yellow-Theme</destination>
+            </resource>
           </resources>
         </configuration>
         <executions>