royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch feature/jewel-ui-set updated: preparing blue theme to make separations of primary colors
Date Sat, 31 Mar 2018 15:34:26 GMT
This is an automated email from the ASF dual-hosted git repository.

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


The following commit(s) were added to refs/heads/feature/jewel-ui-set by this push:
     new b75820a  preparing blue theme to make separations of primary colors
b75820a is described below

commit b75820ac352046cc04272f6efcd36012b844b8ef
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sat Mar 31 17:34:21 2018 +0200

    preparing blue theme to make separations of primary colors
---
 examples/royale/JewelExample/pom.xml               |   4 +-
 frameworks/themes/JewelBlueTheme/pom.xml           |   4 +-
 .../src/main/resources/assets/JewelButton2.svg     |  44 --
 .../src/main/resources/assets/jewel-button.svg     |  37 --
 .../JewelBlueTheme/src/main/resources/defaults.css | 562 +++++++++++++++++++++
 .../src/main/resources/royale-jewel-blue.css       | 271 ----------
 .../JewelBlueTheme/src/main/sass/_global.sass      |  28 +-
 .../JewelBlueTheme/src/main/sass/_mixins.sass      |  24 +-
 .../JewelBlueTheme/src/main/sass/_variables.sass   |  51 +-
 .../_alert.sass}                                   |  12 +-
 .../src/main/sass/components/_button.sass          | 104 ++--
 .../src/main/sass/components/_checkbox.sass        | 105 ++++
 .../components/{_label.sass => _controlbar.sass}   |  13 +-
 .../src/main/sass/components/_label.sass           |   8 +-
 .../src/main/sass/components/_radiobutton.sass     | 101 ++++
 .../{_variables.sass => components/_slider.sass}   |  39 +-
 .../src/main/sass/components/_textbutton.sass      | 103 ++--
 .../src/main/sass/components/_textfield.sass       | 120 +++--
 .../components/{_label.sass => _titlebar.sass}     |  13 +-
 .../sass/{royale-jewel-blue.sass => defaults.sass} |   9 +-
 20 files changed, 1115 insertions(+), 537 deletions(-)

diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index b2b08f8..5427bc4 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -120,13 +120,13 @@
       <scope>theme</scope>
       <classifier>js</classifier>
     </dependency>
-    <!-- <dependency>
+    <dependency>
       <groupId>org.apache.royale.framework</groupId>
       <artifactId>JewelBlueTheme</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <scope>theme</scope>
-    </dependency> -->
+    </dependency>
   </dependencies>
 
 </project>
diff --git a/frameworks/themes/JewelBlueTheme/pom.xml b/frameworks/themes/JewelBlueTheme/pom.xml
index 30632ff..c37e7e4 100644
--- a/frameworks/themes/JewelBlueTheme/pom.xml
+++ b/frameworks/themes/JewelBlueTheme/pom.xml
@@ -50,8 +50,8 @@
               <path>../src/main/resources/assets/*</path>
             </include-file>
             <include-file>
-              <name>royale-jewel-blue.css</name>
-              <path>../src/main/resources/royale-jewel-blue.css</path>
+              <name>defaults.css</name>
+              <path>../src/main/resources/defaults.css</path>
             </include-file>
           </includeFiles>
         </configuration>
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
deleted file mode 100644
index ad0c128..0000000
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
+++ /dev/null
@@ -1,44 +0,0 @@
-
-<!--
-
-  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.
-
--->
-
-<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%" id="linearGradient-1">
-            <stop stop-color="#3BB0FF" offset="0%"></stop>
-            <stop stop-color="#1E36FA" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3">
-            <stop stop-color="#8EDEFF" offset="0%"></stop>
-            <stop stop-color="#1D89E6" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="JewelButton">
-            <g id="Background" transform="translate(1.000000, 1.000000)">
-                <g>
-                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
-                    <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3"></rect>
-                </g>
-                <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3"></rect>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
deleted file mode 100644
index 63bfc72..0000000
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-<!--
-
-  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.
-
--->
-<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
-    </defs>
-    <g id="Jewel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="button/large">
-            <mask id="mask-2" fill="white">
-                <use xlink:href="#path-1"></use>
-            </mask>
-            <use id="mask" fill="#009EF5" fill-rule="evenodd" xlink:href="#path-1"></use>
-            <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB" fill-rule="evenodd">
-                <rect x="0" y="0" width="126" height="48"></rect>
-            </g>
-            <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato" font-size="18" font-weight="bold" line-spacing="24" letter-spacing="-0.225000009"></text>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
new file mode 100644
index 0000000..66c696c
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
@@ -0,0 +1,562 @@
+/**
+ *  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";
+.royale *, .royale *:before, .royale *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+j|Application {
+  font-family: "Lato", sans-serif;
+  color: #808080;
+}
+
+h1 {
+  font-size: 22px;
+}
+
+h2 {
+  font-size: 19px;
+}
+
+h3 {
+  font-size: 17px;
+}
+
+h4 {
+  font-size: 15px;
+}
+
+span {
+  font-size: 14px;
+}
+
+div {
+  font-size: 14px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.jewel.button {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 8px;
+  min-width: 34px;
+  min-height: 34px;
+  border: 1px solid #b3b3b3;
+  background: linear-gradient(#e6e6e6, #cccccc);
+  box-shadow: inset 0 1px 0 white;
+  border-radius: 3px;
+}
+.jewel.button:hover {
+  border: 1px solid #a6a6a6;
+  background: linear-gradient(#d9d9d9, silver);
+}
+.jewel.button:active {
+  border: 1px solid #8d8d8d;
+  background: linear-gradient(silver, #a6a6a6);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button:focus {
+  outline: none;
+  border: 1px solid #b3b3b3;
+  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[disabled] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  box-shadow: none;
+  cursor: unset;
+}
+
+.jewel.button.primary {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 8px;
+  min-width: 34px;
+  min-height: 34px;
+  border: 1px solid #0f88d1;
+  background: linear-gradient(#54b7f3, #24a3ef);
+  box-shadow: inset 0 1px 0 #9bd5f8;
+  border-radius: 3px;
+}
+.jewel.button.primary:hover {
+  border: 1px solid #0d79ba;
+  background: linear-gradient(#3CADF1, #1198e9);
+}
+.jewel.button.primary:active {
+  border: 1px solid #0a5a8a;
+  background: linear-gradient(#1198e9, #0d79ba);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.primary:focus {
+  outline: none;
+  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.primary[disabled] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  box-shadow: none;
+  cursor: unset;
+}
+
+.jewel.button.secondary {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 8px;
+  min-width: 34px;
+  min-height: 34px;
+  border: 1px solid #be390e;
+  background: linear-gradient(#f16c42, #ed4812);
+  box-shadow: inset 0 1px 0 #f6a389;
+  border-radius: 3px;
+}
+.jewel.button.secondary:hover {
+  border: 1px solid #a6320d;
+  background: linear-gradient(#EF5A2A, #d64010);
+}
+.jewel.button.secondary:active {
+  border: 1px solid #772409;
+  background: linear-gradient(#d64010, #a6320d);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.secondary:focus {
+  outline: none;
+  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] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  box-shadow: none;
+  cursor: unset;
+}
+
+.jewel.button.emphasized {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 8px;
+  min-width: 34px;
+  min-height: 34px;
+  border: 1px solid #277b32;
+  background: linear-gradient(#45c354, #34a241);
+  box-shadow: inset 0 1px 0 #7fd68a;
+  border-radius: 3px;
+}
+.jewel.button.emphasized:hover {
+  border: 1px solid #21682a;
+  background: linear-gradient(#3AB549, #2e8e39);
+}
+.jewel.button.emphasized:active {
+  border: 1px solid #15411a;
+  background: linear-gradient(#2e8e39, #21682a);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.button.emphasized:focus {
+  outline: none;
+  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] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  box-shadow: none;
+  cursor: unset;
+}
+
+.jewel.checkbox {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
+  height: 22px;
+}
+.jewel.checkbox input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
+  border-radius: 3px;
+}
+.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#3CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
+  background-repeat: no-repeat;
+  background-size: 90%;
+  background-position: center;
+  background-attachment: fixed;
+}
+.jewel.checkbox input:focus {
+  outline: none;
+  border: 1px solid #0f88d1;
+}
+.jewel.checkbox input[disabled] {
+  cursor: unset;
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+}
+.jewel.checkbox input[disabled] + span {
+  cursor: unset;
+  color: #c6c6c6;
+}
+.jewel.checkbox input[disabled]:checked {
+  border: 1px solid #c6c6c6;
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #F9F9F9;
+  background-size: 90%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+.jewel.checkbox span {
+  cursor: pointer;
+  position: absolute;
+  margin: 0;
+  padding-left: 6px;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.jewel.label {
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+}
+
+.jewel.radiobutton {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
+  height: 22px;
+}
+.jewel.radiobutton input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
+  border-radius: 50%;
+}
+.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#3CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
+  background-repeat: no-repeat;
+  background-size: 60%;
+  background-position: center;
+  background-attachment: fixed;
+}
+.jewel.radiobutton input:focus {
+  outline: none;
+  border: 1px solid #0f88d1;
+}
+.jewel.radiobutton input[disabled] {
+  cursor: unset;
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+}
+.jewel.radiobutton input[disabled] + span {
+  cursor: unset;
+  color: #c6c6c6;
+}
+.jewel.radiobutton input[disabled]:checked {
+  border: 1px solid #c6c6c6;
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='lightgray' cx='11' cy='11' r='6'></circle></g></g></svg>"), #F9F9F9;
+  background-size: 60%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+.jewel.radiobutton span {
+  cursor: pointer;
+  position: absolute;
+  margin: 0;
+  padding-left: 6px;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.jewel.slider input {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+}
+.jewel.slider input:hover {
+  opacity: 1;
+}
+.jewel.slider input:focus {
+  outline: none;
+}
+.jewel.slider input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #3CADF1;
+  cursor: pointer;
+}
+.jewel.slider input::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #3CADF1;
+  cursor: pointer;
+}
+
+.jewel.textbutton {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 16px;
+  min-width: 74px;
+  min-height: 34px;
+  border: 1px solid #b3b3b3;
+  background: linear-gradient(#e6e6e6, #cccccc);
+  box-shadow: inset 0 1px 0 white;
+  border-radius: 3px;
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #808080;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.jewel.textbutton:hover {
+  border: 1px solid #a6a6a6;
+  background: linear-gradient(#d9d9d9, silver);
+}
+.jewel.textbutton:active {
+  border: 1px solid #8d8d8d;
+  background: linear-gradient(silver, #a6a6a6);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton:focus {
+  outline: none;
+  border: 1px solid #b3b3b3;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.jewel.textbutton[disabled] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  color: #c6c6c6;
+  box-shadow: none;
+  cursor: unset;
+  font-weight: normal;
+  text-shadow: unset;
+}
+
+.jewel.textbutton.primary {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 16px;
+  min-width: 74px;
+  min-height: 34px;
+  border: 1px solid #0f88d1;
+  background: linear-gradient(#54b7f3, #24a3ef);
+  box-shadow: inset 0 1px 0 #9bd5f8;
+  border-radius: 3px;
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  text-decoration: none;
+  shadow: 0 1px 0 #d9d9d9;
+}
+.jewel.textbutton.primary:hover {
+  border: 1px solid #0d79ba;
+  background: linear-gradient(#3CADF1, #1198e9);
+}
+.jewel.textbutton.primary:active {
+  border: 1px solid #0a5a8a;
+  background: linear-gradient(#1198e9, #0d79ba);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton.primary:focus {
+  outline: none;
+  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.textbutton.primary[disabled] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  color: #c6c6c6;
+  box-shadow: none;
+  cursor: unset;
+  font-weight: normal;
+  text-shadow: unset;
+}
+
+.jewel.textbutton.secondary {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 16px;
+  min-width: 74px;
+  min-height: 34px;
+  border: 1px solid #be390e;
+  background: linear-gradient(#f16c42, #ed4812);
+  box-shadow: inset 0 1px 0 #f6a389;
+  border-radius: 3px;
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  text-decoration: none;
+  shadow: 0 1px 0 #d9d9d9;
+}
+.jewel.textbutton.secondary:hover {
+  border: 1px solid #a6320d;
+  background: linear-gradient(#EF5A2A, #d64010);
+}
+.jewel.textbutton.secondary:active {
+  border: 1px solid #772409;
+  background: linear-gradient(#d64010, #a6320d);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton.secondary:focus {
+  outline: none;
+  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.textbutton.secondary[disabled] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  color: #c6c6c6;
+  box-shadow: none;
+  cursor: unset;
+  font-weight: normal;
+  text-shadow: unset;
+}
+
+.jewel.textbutton.emphasized {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 16px;
+  min-width: 74px;
+  min-height: 34px;
+  border: 1px solid #277b32;
+  background: linear-gradient(#45c354, #34a241);
+  box-shadow: inset 0 1px 0 #7fd68a;
+  border-radius: 3px;
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  text-decoration: none;
+  shadow: 0 1px 0 #d9d9d9;
+}
+.jewel.textbutton.emphasized:hover {
+  border: 1px solid #21682a;
+  background: linear-gradient(#3AB549, #2e8e39);
+}
+.jewel.textbutton.emphasized:active {
+  border: 1px solid #15411a;
+  background: linear-gradient(#2e8e39, #21682a);
+  box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+}
+.jewel.textbutton.emphasized:focus {
+  outline: none;
+  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.textbutton.emphasized[disabled] {
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  color: #c6c6c6;
+  box-shadow: none;
+  cursor: unset;
+  font-weight: normal;
+  text-shadow: unset;
+}
+
+.jewel.textfield {
+  position: relative;
+  display: inline-flex;
+}
+.jewel.textfield input {
+  margin: 0;
+  padding: 0.67em 1em;
+  max-width: 100%;
+  flex: 1 0 auto;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: left;
+  line-height: 1.4em;
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: #808080;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
+  border-radius: 3px;
+  transition-duration: 0.3s;
+  transition-timing-function: easein;
+}
+.jewel.textfield input:focus {
+  border: 1px solid #0f88d1;
+}
+.jewel.textfield input::placeholder {
+  color: #a6a6a6;
+}
+.jewel.textfield input[disabled] {
+  cursor: unset;
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  box-shadow: none;
+  color: #c6c6c6;
+}
+.jewel.textfield input[disabled]::placeholder {
+  color: #c6c6c6;
+}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
deleted file mode 100644
index 32894c4..0000000
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
+++ /dev/null
@@ -1,271 +0,0 @@
-/**
- *  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";
-.royale *, .royale *:before, .royale *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.royale {
-  padding: 10px;
-  margin: 10px;
-}
-
-/**
- * Jewel Button
- */
-.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
-  cursor: pointer;
-  display: inline-block;
-  margin: 0;
-  padding: 10px 16px;
-  min-width: 74px;
-  min-height: 34px;
-  /* Background: */
-  border: none;
-  border-radius: 3px;
-}
-
-.jewel.button {
-  background-color: rgba(0, 0, 0, 0.3);
-  transition-duration: 0.4s;
-  color: rgba(0, 0, 0, 0.4);
-}
-.jewel.button:hover {
-  background-color: rgba(15, 15, 15, 0.3);
-}
-.jewel.button:active {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.jewel.button:focus {
-  outline: 0;
-}
-.jewel.button[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-.jewel.button.primary {
-  background-color: #006CEB;
-  transition-duration: 0.4s;
-  color: white;
-}
-.jewel.button.primary:hover {
-  background-color: #0b7bff;
-}
-.jewel.button.primary:active {
-  background-color: #005ecc;
-}
-.jewel.button.primary:focus {
-  outline: 0;
-}
-.jewel.button.primary[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-.jewel.button.secondary {
-  background-color: #011833;
-  transition-duration: 0.4s;
-  color: white;
-}
-.jewel.button.secondary:hover {
-  background-color: #022651;
-}
-.jewel.button.secondary:active {
-  background-color: #000a15;
-}
-.jewel.button.secondary:focus {
-  outline: 0;
-}
-.jewel.button.secondary[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-.jewel.button.emphasized {
-  background-color: #1FD348;
-  transition-duration: 0.4s;
-  color: white;
-}
-.jewel.button.emphasized:hover {
-  background-color: #30e158;
-}
-.jewel.button.emphasized:active {
-  background-color: #1bb83f;
-}
-.jewel.button.emphasized:focus {
-  outline: 0;
-}
-.jewel.button.emphasized[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-/**
- * Jewel TextButton
- */
-.jewel.textbutton, .jewel.textbutton:hover {
-  /* TextField */
-  font-family: "Lato", sans-serif;
-  font-style: bold;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  text-decoration: none;
-}
-.jewel.textbutton [disabled] {
-  text-shadow: unset;
-}
-
-.jewel.textbutton {
-  background-color: rgba(0, 0, 0, 0.3);
-  transition-duration: 0.4s;
-  color: rgba(0, 0, 0, 0.4);
-}
-.jewel.textbutton:hover {
-  background-color: rgba(15, 15, 15, 0.3);
-}
-.jewel.textbutton:active {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.jewel.textbutton:focus {
-  outline: 0;
-}
-.jewel.textbutton[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-.jewel.textbutton.primary {
-  background-color: #006CEB;
-  transition-duration: 0.4s;
-  color: white;
-}
-.jewel.textbutton.primary:hover {
-  background-color: #0b7bff;
-}
-.jewel.textbutton.primary:active {
-  background-color: #005ecc;
-}
-.jewel.textbutton.primary:focus {
-  outline: 0;
-}
-.jewel.textbutton.primary[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-.jewel.textbutton.secondary {
-  background-color: #011833;
-  transition-duration: 0.4s;
-  color: white;
-}
-.jewel.textbutton.secondary:hover {
-  background-color: #022651;
-}
-.jewel.textbutton.secondary:active {
-  background-color: #000a15;
-}
-.jewel.textbutton.secondary:focus {
-  outline: 0;
-}
-.jewel.textbutton.secondary[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-.jewel.textbutton.emphasized {
-  background-color: #1FD348;
-  transition-duration: 0.4s;
-  color: white;
-}
-.jewel.textbutton.emphasized:hover {
-  background-color: #30e158;
-}
-.jewel.textbutton.emphasized:active {
-  background-color: #1bb83f;
-}
-.jewel.textbutton.emphasized:focus {
-  outline: 0;
-}
-.jewel.textbutton.emphasized[disabled] {
-  background-color: #CCCCCC;
-  color: #888888;
-  cursor: unset;
-}
-
-/**
- * Jewel Label
- */
-.jewel.label {
-  font-family: "Lato", sans-serif;
-  font-size: 0.75rem;
-}
-
-/**
- * Jewel TextField
- */
-TextField {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 300px;
-  max-width: 100%;
-  margin: 0;
-}
-
-.vTextField--input {
-  font-size: 16px;
-  font-family: "Lato", sans-serif;
-  border: none;
-  border-bottom: 2px solid;
-  border-bottom-color: #ff0000;
-  display: block;
-  margin: 0;
-  padding: 4 0;
-  width: 100px;
-  background: transparent;
-  text-align: left;
-  color: inherit;
-  outline: none;
-}
-
-.vTextField--label {
-  bottom: 0;
-  color: #ff0000;
-  font-size: 13px;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  position: absolute;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: left;
-}
-
-/*# sourceMappingURL=royale-jewel-blue.css.map */
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
index febf662..f0a1623 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
@@ -25,8 +25,28 @@
 	-moz-box-sizing: border-box
 	-webkit-box-sizing: border-box
 	box-sizing: border-box
-	//fonts: ClassReference("org.apache.royale.jewel.JewelBlueThemeFontInject")
+	
+j|Application
+	font:
+		family: $font-stack
+	color: $default-font-color
 
-.royale
-	padding: 10px
-	margin: 10px
+h1
+	font-size: 22px
+
+h2
+	font-size: 19px
+
+h3
+	font-size: 17px
+
+h4
+	font-size: 15px
+
+span
+	font-size: 14px
+
+div
+	font-size: 14px
+	white-space: normal
+	word-wrap: break-word
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
index f4e7302..a0a4045 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
@@ -17,24 +17,12 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-=button-theme($button-color, $text-color)
-	//border-color: darken($button-color, 20%)
-	background-color: $button-color
-	transition:
-		duration: 0.4s
-	color: $text-color
-	&:hover
-		background-color: lighten($button-color, 6%)
-		//box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
-	&:active
-		background-color: darken($button-color, 6%)
-		//box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
-	&:focus
-		outline: 0
-	&[disabled]
-		background-color: $disabled-color
-		color: $font-disabled-color
-		cursor: unset
+
+=appear($val)
+	-webkit-appearance: $val
+	-moz-appearance: $val
+	-o-appearance: $val
+	appearance: $val
 
 //=trans($val...)
 //	-webkit-transition: $val
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
index 3a6b64b..974be28 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
@@ -17,16 +17,53 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
+// CONSTANTS
+// 12 Color Themes (this will go to one separate project each one)
+$red: #EC1C24
+$amethyst: #922590
+$violet: #662C90
+$Sapphire: #2C74BE
+$blue: #3CADF1
+$turquoise: #29A89F
+$green: #3AB549
+$emerald: #8CC63C
+$yellow: #FCEF0A
+$sunflower: #F8B13F
+$orange: #F7941D
+$topaz: #EF5A2A
+$font-theme-color: #FFFFFF
+
+$light-color: #d9d9d9
+$font-light-color: #808080
+
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+$dark: false
+$transitions-enable: false
+$transition-duration: .3s
+$transition-timing: easein
+
+// FONTS
 $font-stack: 'Lato', sans-serif
-$font-size: 0.75rem
+$font-size: 14px//0.75rem
+
+// VARIABLES
+$default-color: $light-color
+@if $dark
+    $default-color: $dark-color
+
+$primary-color: $blue
+$secondary-color: $topaz
+$emphasized-color: $green
 
-// Common Colors
-$white: rgba(white,.9)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
+$default-font-color: $font-light-color
+@if $dark
+    $default-font-color: $font-dark-color
 
-// Button variables
-$button-min-width: 74px !default
+$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
 
 
 
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
similarity index 84%
rename from frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
index 3bdf08e..a4257b5 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
@@ -16,11 +16,9 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #006CEB
-$secondary-color: #011833
-$emphasized-color: #1FD348
 
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: white
\ No newline at end of file
+// Jewel Alert
+
+// Alert variables
+
+.jewel.alert
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
index d04d186..7824b40 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -17,57 +17,79 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Jewel Button
- */
-%button-def
+// Jewel Button
+
+// Button variables
+$button-margin: 0 !default
+$button-padding: 8px !default
+$button-min-height: 34px !default
+$button-min-width: 34px !default
+
+$button-border-radius: 3px
+
+=button-theme($button-color)
 	cursor: pointer
-	
 	display: inline-block
-	margin: 0 //1rem
-	padding: 10px 16px //.938em 1.875em
-	min-width: $button-min-width
-	min-height: 34px
 
-	/* Background: */
-	border: none // .094em solid 
-	border-radius: 3px //.625em
-	//box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
+	margin: $button-margin //1rem
+	padding: $button-padding //.938em 1.875em
+	
+	min-width: $button-min-width
+	min-height: $button-min-height
+	
+	@if $flat
+		border: 0px solid
+		background: $button-color
+	@else
+		border: 1px solid darken($button-color, 15%)// .094em 
+		background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+		box-shadow: inset 0 1px 0 lighten($button-color, 20%) //0px 0px 0px 4px rgba($light-color,.3),
+	border-radius: $button-border-radius //.625em
+	
+	@if $transitions-enable
+		transition:
+			duration: $transition-duration
+			timing-function: $transition-timing
+	
+	&:hover
+		@if $flat
+			background: darken($button-color, 5%)
+		@else
+			border: 1px solid darken($button-color, 20%)// .094em 
+			background: linear-gradient($button-color, darken($button-color, 10%))
+	
+	&:active
+		@if $flat
+			background: darken($button-color, 15%)
+		@else
+			border: 1px solid darken($button-color, 30%)// .094em solid 
+			background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+			box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+	
+	&:focus
+		outline: none
+		@if $flat
+			border: 1px solid $button-color
+			box-shadow: inset 0px 0px 0px 1px rgba(lighten($button-color, 50%), .5)
+		@else
+			border: 1px solid darken($button-color, 15%)
+			box-shadow: inset 0px 0px 0px 1px rgba(lighten($button-color, 50%), .5), inset 0 1px 0 rgba(lighten($button-color, 55%), .6)
 
-.jewel.button, .jewel.button:hover
-	@extend %button-def
+	&[disabled]
+		border: 1px solid darken($disabled-color, 20%)// .094em solid 
+		background: $disabled-color
+		box-shadow: none
+		cursor: unset
 
 .jewel.button
-	+button-theme($default-color, $default-font-color)
+	+button-theme($default-color)
 
 .jewel.button.primary
-	+button-theme($primary-color, $font-color)
+	+button-theme($primary-color)
 
 .jewel.button.secondary
-	+button-theme($secondary-color, $font-color)
+	+button-theme($secondary-color)
 
 .jewel.button.emphasized
-	+button-theme($emphasized-color, $font-color)
-
-
-//SVGs
-//border:1px; /*without this svg shows scaled and bigger*/
-//border-image-source: url(assets/jewel-button.svg) ;
-//border-image-slice: 4;
-//border-image-width: 4;
-
-//background-image: linear-gradient(#3BB0FF, #1E36FA);
-
-//background-color: #006CEB;
-//background-size: cover;
-//background-repeat: no-repeat;
-//background-clip: padding-box;
-
-//background: url(assets/4slicewithpattern.svg);
-//background-size: cover;
-//width: fit-content;
-//height: fit-content;
+	+button-theme($emphasized-color)
 
-//.button:active	
-//box-shadow: #E6431D 0 1px 0 inset;
-//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_checkbox.sass
new file mode 100644
index 0000000..a52e126
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_checkbox.sass
@@ -0,0 +1,105 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel CheckBox
+
+// CheckBox variables
+$checkbox-button-size: 22px
+$checkbox-border-radius: 3px
+$checkbox-label-separation: 6px
+$checkbox-label-font-size: 16px
+
+.jewel.checkbox
+    //cursor: pointer
+    display: inline-block
+
+    margin: 0
+    padding: 0
+
+    position: relative
+    vertical-align: middle
+    
+    width: 100%
+    height: $checkbox-button-size
+
+    // -- INPUT
+    input
+        +appear(none)
+        cursor: pointer
+        display: inline-block
+        
+        margin: 0
+        padding: 0
+        
+        width: $checkbox-button-size
+        height: $checkbox-button-size
+
+        line-height: $checkbox-button-size
+
+        @if $flat
+            border: 0px solid
+            background: $default-color
+        @else
+            background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+            border: 1px solid darken($default-color, 15%)
+        border-radius: $checkbox-border-radius
+
+        &:checked,  &:checked:active
+            background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{$primary-color}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, 25%)
+            background-repeat: no-repeat
+            background-size: 90%
+            background-position: center
+            background-attachment: fixed
+            // @if $flat
+            //     background: lighten($primary-color, 25%)
+            // @else
+            //     border: 1px solid darken($primary-color, 15%)
+            
+        &:focus
+            outline: none
+            @if $flat
+                background: lighten($primary-color, 25%)
+            @else
+                border: 1px solid darken($primary-color, 15%)
+
+        &[disabled]
+            cursor: unset
+            border: 1px solid darken($disabled-color, 20%)
+            background: $disabled-color
+            
+            & + span
+                cursor: unset
+                color: darken($disabled-color, 20%)
+
+            &:checked
+                border: 1px solid darken($disabled-color, 20%)
+                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $disabled-color
+                background-size: 90%
+                background-position: center
+                background-repeat: no-repeat
+                background-attachment: fixed
+                
+    // -- LABEL
+    span
+        cursor: pointer
+        position: absolute
+        margin: 0
+        padding-left: $checkbox-label-separation
+        font-size: $checkbox-label-font-size
+        line-height: $checkbox-button-size
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
similarity index 86%
copy from frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
index 63b60c9..49bc0db 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
@@ -17,11 +17,8 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Jewel Label
- */
-.jewel.label
-	//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
-	font:
-		family: $font-stack
-		size: $font-size
\ No newline at end of file
+// Jewel ControlBar
+
+// ControlBar variables
+
+.jewel.controlbar
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
index 63b60c9..7887e00 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
@@ -17,11 +17,11 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Jewel Label
- */
-.jewel.label
+j|Label
 	//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+	//IBeadView: ClassReference("org.apache.royale.jewel.beads.views.LabelViewBead")
+	
+.jewel.label
 	font:
 		family: $font-stack
 		size: $font-size
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_radiobutton.sass
new file mode 100644
index 0000000..a7b4ff0
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_radiobutton.sass
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel RadioButton
+
+// RadioButton variables
+$radiobutton-button-size: 22px
+$radiobutton-border-radius: 50%
+$radiobutton-label-separation: 6px
+$radiobutton-label-font-size: 16px
+
+.jewel.radiobutton
+    //cursor: pointer
+    display: inline-block
+
+    margin: 0
+    padding: 0
+
+    position: relative
+    vertical-align: middle
+    
+    width: 100%
+    height: $radiobutton-button-size
+
+    // -- INPUT
+    input
+        +appear(none)
+        cursor: pointer
+        display: inline-block
+        
+        margin: 0
+        padding: 0
+        
+        width: $radiobutton-button-size
+        height: $radiobutton-button-size
+
+        line-height: $radiobutton-button-size
+
+        @if $flat
+            border: 0px solid
+            background: $default-color
+        @else
+            background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+            border: 1px solid darken($default-color, 15%)
+        border-radius: $radiobutton-border-radius
+
+        &:checked,  &:checked:active
+            background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{$primary-color}' cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
+            background-repeat: no-repeat
+            background-size: 60%
+            background-position: center
+            background-attachment: fixed
+            
+        &:focus
+            outline: none
+            @if $flat
+                background: lighten($primary-color, 25%)
+            @else
+                border: 1px solid darken($primary-color, 15%)
+
+        &[disabled]
+            cursor: unset
+            border: 1px solid darken($disabled-color, 20%)
+            background: $disabled-color
+            
+            & + span
+                cursor: unset
+                color: darken($disabled-color, 20%)
+            
+            &:checked
+                border: 1px solid darken($disabled-color, 20%)
+                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{darken($disabled-color, 15%)}' cx='11' cy='11' r='6'></circle></g></g></svg>"), $disabled-color
+                background-size: 60%
+                background-position: center
+                background-repeat: no-repeat
+                background-attachment: fixed
+                
+    // -- LABEL
+    span
+        cursor: pointer
+        position: absolute
+        margin: 0
+        padding-left: $radiobutton-label-separation
+        font-size: $radiobutton-label-font-size
+        line-height: $radiobutton-button-size
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
similarity index 56%
copy from frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
index 3a6b64b..115df2c 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
@@ -17,16 +17,37 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-$font-stack: 'Lato', sans-serif
-$font-size: 0.75rem
+.jewel.slider
 
-// Common Colors
-$white: rgba(white,.9)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
-
-// Button variables
-$button-min-width: 74px !default
+    input
+        -webkit-appearance: none
+        width: 100%
+        height: 15px
+        border-radius: 5px
+        background: #d3d3d3
+        outline: none
+        opacity: 0.7
+        -webkit-transition: .2s
+        transition: opacity .2s
 
+        &:hover
+            opacity: 1
 
+        &:focus
+            outline: none
 
+        &::-webkit-slider-thumb
+            -webkit-appearance: none
+            appearance: none
+            width: 15px
+            height: 15px
+            border-radius: 50%
+            background: $primary-color
+            cursor: pointer
+        
+        &::-moz-range-thumb
+            width: 15px
+            height: 15px
+            border-radius: 50%
+            background: $primary-color
+            cursor: pointer
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index b02123a..70b9345 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -16,49 +16,92 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
- 
-/**
- * Jewel TextButton
- */
-%textbutton-def
-	@extend %button-def
-	/* TextField */
+
+// Jewel TextButton
+
+// TextButton variables
+$textbutton-margin: 0 !default
+$textbutton-padding: 10px 16px !default
+$textbutton-min-height: 34px !default
+$textbutton-min-width: 74px !default
+
+=textbutton-theme($textbutton-color, $text-color)
+	cursor: pointer
+	display: inline-block
+	
+	margin: $textbutton-margin //1rem
+	padding: $textbutton-padding //.938em 1.875em
+	
+	min-width: $textbutton-min-width
+	min-height: $textbutton-min-height
+	
+	@if $flat
+		border: 0px solid
+		background: $textbutton-color
+	@else
+		border: 1px solid darken($textbutton-color, 15%)// .094em solid 
+		background: linear-gradient(lighten($textbutton-color, 5%), darken($textbutton-color, 5%))
+		box-shadow: inset 0 1px 0 lighten($textbutton-color, 20%)
+	border-radius: $button-border-radius //.625em
+	
+	@if $transitions-enable
+		transition:
+			duration: $transition-duration
+			timing-function: $transition-timing
+	
 	font:
 		family: $font-stack 
-		style: bold 
 		size: $font-size
-	//+trans(0.2s ease-in-out)
+		weight: bold
+	color: $text-color
 	text:
 		transform: uppercase
 		decoration: none 
-		//shadow: 0 .063em rgba(black,.3)
-	[disabled]
+	@if not $flat and $text-color == $font-theme-color
+		shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
+	
+	&:hover
+		@if $flat
+			background: darken($textbutton-color, 5%)
+		@else
+			border: 1px solid darken($textbutton-color, 20%)// .094em solid 
+			background: linear-gradient($textbutton-color, darken($textbutton-color, 10%))
+	&:active
+		@if $flat
+			background: darken($textbutton-color, 15%)
+		@else
+			border: 1px solid darken($textbutton-color, 30%)// .094em solid 
+			background: linear-gradient(darken($textbutton-color, 10%), darken($textbutton-color, 20%))
+			box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+	
+	&:focus
+		outline: none
+		@if $flat
+			border: 1px solid $textbutton-color
+			box-shadow: inset 0px 0px 0px 1px rgba(lighten($textbutton-color, 50%), .5)
+		@else
+			border: 1px solid darken($textbutton-color, 15%)
+			box-shadow: inset 0px 0px 0px 1px rgba(lighten($textbutton-color, 50%), .5), inset 0 1px 0 rgba(lighten($textbutton-color, 55%), .6)
+	
+	&[disabled]
+		border: 1px solid darken($disabled-color, 20%)// .094em solid 
+		background: $disabled-color
+		color: darken($disabled-color, 20%)
+		box-shadow: none
+		cursor: unset
+		font:
+			weight: normal
 		text:
 			shadow: unset
 
-.jewel.textbutton, .jewel.textbutton:hover
-	@extend %textbutton-def
-
 .jewel.textbutton
-	+button-theme($default-color, $default-font-color)
+	+textbutton-theme($default-color, $default-font-color)
 
 .jewel.textbutton.primary
-	+button-theme($primary-color, $font-color)
+	+textbutton-theme($primary-color, $font-theme-color)
 
 .jewel.textbutton.secondary
-	+button-theme($secondary-color, $font-color)
+	+textbutton-theme($secondary-color, $font-theme-color)
 
 .jewel.textbutton.emphasized
-	+button-theme($emphasized-color, $font-color)
-
-// /* TextField: */
-//	font-family: $font-stack
-//	font-size: 14px
-//	font-weight: bold
-//	color: $font-normal-color
-//	text-shadow: 0 1px 0 #555
-
-//	padding: 10px 0px
-//	display: inline-block
-//	min-width: 80px
-
+	+textbutton-theme($emphasized-color, $font-theme-color)
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
index 84b696c..3e04d9a 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
@@ -17,51 +17,85 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Jewel TextField
- */
-TextField
+// Jewel Textfield
+
+// Textfield variables
+$textfield-margin: 0 !default
+$textfield-padding: .67em 1em !default
+//10px 16px
+$textfield-min-height: 34px !default
+$textfield-min-width: 74px !default
+
+$textfield-border-radius: 3px
+
+=textfield-theme($textfield-text-color)
 	position: relative
-	display: inline-block
-	box-sizing: border-box
-	width: 300px
-	max-width: 100%
-	margin: 0
+	display: inline-flex
+	
+	input
+		margin: $textfield-margin
+		padding: $textfield-padding
+		
+		max-width: 100%
+		
+		flex: 1 0 auto
+		outline: none
+		-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+		
+		text-align: left
+		line-height: 1.4em
+
+		font:
+			family: $font-stack
+			size: $font-size
+			weight: normal
+		color: $textfield-text-color
+
+		@if $flat
+			border: 0px solid
+			background: $default-color
+		@else
+			background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+			border: 1px solid darken($default-color, 15%)
+			//box-shadow: none
+		border-radius: $textfield-border-radius
+		
+		@if $transitions-enable
+		transition:
+			duration: $transition-duration
+			timing-function: $transition-timing
+		
+		&:focus
+			@if $flat
+				background: lighten($primary-color, 25%)
+			@else
+				border: 1px solid darken($primary-color, 15%)
+		
+		//&:hover 
+		//    padding: 5px;
+		//    background-color: #DFDFDF;
 
-.vTextField--input
-	font-size: 16px
-	font-family: 'Lato', sans-serif
+		&::placeholder
+			color: lighten($textfield-text-color, 15%)
 
-	border: none
-	border-bottom: 2px solid
-	border-bottom-color: #ff0000
-	display: block
-	margin: 0
-	padding: 4 0
-	width: 100px
-	background: transparent
-	text-align: left
-	color: inherit
-	outline: none
+		&[disabled]
+			cursor: unset
+			border: 1px solid darken($disabled-color, 20%)
+			background: $disabled-color
+			box-shadow: none
+			color: darken($disabled-color, 20%)
+			
+			&::placeholder
+				color: darken($disabled-color, 20%)
 
-.vTextField--label
-	bottom: 0
-	color: #ff0000
-	font-size: 13px
-	left: 0
-	right: 0
-	pointer-events: none
-	position: absolute
-	display: block
-	width: 100%
-	overflow: hidden
-	white-space: nowrap
-	text-align: left
+.jewel.textfield
+	@if $dark
+		+textfield-theme($font-dark-color)
+	@else
+		+textfield-theme($font-light-color)
 
-//    padding: 5px;
-//    border: solid 1px #666666;
-//    border-radius: 6px;
-//    color: #333333;
-//:hover 
-//    padding: 5px;
-//    background-color: #DFDFDF;
+// .jewel.textfield.primary
+// 	@if $dark
+// 		+textfield-theme($primary-color, $font-dark-color)
+// 	@else
+// 		+textfield-theme($primary-color, $font-light-color)
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
similarity index 86%
copy from frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
index 63b60c9..047d4d4 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
@@ -17,11 +17,8 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Jewel Label
- */
-.jewel.label
-	//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
-	font:
-		family: $font-stack
-		size: $font-size
\ No newline at end of file
+// Jewel TitleBAr
+
+// TitleBar variables
+
+.jewel.titlebar
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/defaults.sass
similarity index 85%
rename from frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/defaults.sass
index f92a6ae..b4f6a8f 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/defaults.sass
@@ -16,7 +16,6 @@
  */
 
 // Variables
-@import "blue-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"
@@ -25,7 +24,13 @@
 @import "global"
 
 // Components
+@import "components/alert"    
 @import "components/button"
-@import "components/textbutton"
+@import "components/checkbox"
+@import "components/controlbar"
 @import "components/label"
+@import "components/radiobutton"
+@import "components/slider"
+@import "components/textbutton"
 @import "components/textfield"
+@import "components/titlebar"

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message