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 2018/03/10 09:07:43 UTC

[royale-asjs] 12/13: partial changes to create various themes with different colors still need much work

This is an automated email from the ASF dual-hosted git repository.

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

commit 63bcfc3f28f70661ccd672c11ad3ec91da2eac7a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 9 20:32:02 2018 +0100

    partial changes to create various themes with different colors still need much work
---
 .../src/main/royale/ButtonPlayGround.mxml          | 12 ++--
 .../main/royale/org/apache/royale/jewel/Button.as  | 55 ++++++++++++++
 .../royale/org/apache/royale/jewel/TextButton.as   | 84 ++++++++++++++++++++--
 frameworks/themes/JewelTheme/pom.xml               |  6 +-
 .../JewelTheme/src/main/resources/defaults.css     | 72 +++++++------------
 .../{defaults.css => royale-jewel-blue.css}        | 74 ++++++++-----------
 .../themes/JewelTheme/src/main/sass/_button.sass   | 64 +++++++++++++----
 .../main/sass/{_variables.sass => _global.sass}    | 18 +++--
 .../themes/JewelTheme/src/main/sass/_mixins.sass   | 24 +++++++
 .../JewelTheme/src/main/sass/_textbutton.sass      | 77 ++++----------------
 .../JewelTheme/src/main/sass/_variables.sass       | 22 ++++--
 .../themes/JewelTheme/src/main/sass/defaults.sass  | 22 ++----
 .../sass/{defaults.sass => royale-jewel-blue.sass} | 29 ++++----
 13 files changed, 333 insertions(+), 226 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index e9e9f9a..3efb4df 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -39,18 +39,18 @@ limitations under the License.
 	<js:TextButton text="Basic"/>
 
 	<j:Button/>
-	<j:TextButton text="C"/>
+	<j:TextButton text="C" />
 
 	<j:TextButton text="Button"/>
 
-	<j:TextButton text="Button With More Text"/>
+	<j:TextButton text="Button With More Text" />
 
-	<j:TextButton text="Button" width="120" height="40"/>
+	<j:TextButton text="Button" width="120" height="40" />
 
 	
-	<j:TextButton text="Button"/>
+	<j:TextButton text="Button" primary="true"/>
 
-	<j:TextButton text="Disabled">
+	<j:TextButton text="Disabled" >
 		<j:beads>
 			<j:Disabled/>
 		</j:beads>
@@ -62,6 +62,6 @@ limitations under the License.
 	<j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500"
 				valueChange="onValueChange(event)"/>
 
-	<j:TextButton id="button" text="Button" width="420" height="440"/>
+	<j:TextButton id="button" text="Button" width="420" height="440" />
 
 </js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 045fa71..938ed89 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -24,6 +24,7 @@ package org.apache.royale.jewel
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -58,8 +59,16 @@ package org.apache.royale.jewel
 		public function Button()
 		{
 			super();
+
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
 		}
 
+        COMPILE::JS
+        protected var _classList:CSSClassList;
+
         /**
 		 * @private
 		 * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -72,5 +81,51 @@ package org.apache.royale.jewel
 			typeNames = "jewel button";
 			return element;
 		}
+
+
+        private var _primary:Boolean = false;
+
+        /**
+		 *  A boolean flag to activate "jewel-button--primary" effect selector.
+		 *  Applies primary color display effect.
+         *  Colors are defined in royale-jewel.css
+         *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get primary():Boolean
+        {
+            return _primary;
+        }
+
+        public function set primary(value:Boolean):void
+        {
+            if (_primary != value)
+            {
+                _primary = value;
+
+                COMPILE::JS
+                {
+                    addOrRemove("jewel-button--primary",value);
+                    setClassName(computeFinalClassNames());
+                }
+            }
+        }
+
+
+
+        COMPILE::JS
+        protected function addOrRemove(classNameVal:String,add:Boolean):void
+        {
+            add ? _classList.add(classNameVal) : _classList.remove(classNameVal);
+        }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
index 30e8f68..d247b43 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -18,24 +18,26 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-    import org.apache.royale.html.TextButton;
-   
+    import org.apache.royale.core.ITextModel;
+
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
     }
     
+    [DefaultProperty("text")]
+
     /**
-     *  The Button class provides a Jewel Design Library UI-like appearance for
-     *  a Button.
+     *  The TextButton class implements a basic button that
+     *  displays text and provides a Jewel Design Library UI-like appearance.
      *
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.2
      */
-	public class TextButton extends org.apache.royale.html.TextButton
+	public class TextButton extends Button
 	{
         /**
          *  Constructor.
@@ -51,6 +53,78 @@ package org.apache.royale.jewel
 		}
         
         /**
+         *  @copy org.apache.royale.html.Label#text
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function get text():String
+		{
+            COMPILE::SWF
+            {
+                return ITextModel(model).text;
+            }
+            COMPILE::JS
+            {
+                return element.innerHTML;
+            }
+		}
+
+        /**
+         *  @private
+         */
+		public function set text(value:String):void
+		{
+            COMPILE::SWF
+            {
+                ITextModel(model).text = value;
+            }
+            COMPILE::JS
+            {
+                this.element.innerHTML = value;
+                this.dispatchEvent('textChange');
+            }
+		}
+
+        /**
+         *  @copy org.apache.royale.html.Label#html
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function get html():String
+		{
+            COMPILE::SWF
+            {
+                return ITextModel(model).html;
+            }
+            COMPILE::JS
+            {
+                return element.innerHTML;
+            }
+		}
+
+        /**
+         *  @private
+         */
+		public function set html(value:String):void
+		{
+            COMPILE::SWF
+            {
+                ITextModel(model).html = value;
+            }
+            COMPILE::JS
+            {
+                this.element.innerHTML = value;
+                this.dispatchEvent('textChange');
+            }
+		}
+        
+        /**
 		 * @private
 		 * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
 		 */
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index f74dd9c..562dd07 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -60,9 +60,13 @@
               <name>assets/*</name>
               <path>../src/main/resources/assets/*</path>
             </include-file>
-            <include-file>
+            <!-- <include-file>
               <name>defaults.css</name>
               <path>../src/main/resources/defaults.css</path>
+            </include-file> -->
+            <include-file>
+              <name>royale-jewel-blue.css</name>
+              <path>../src/main/resources/royale-jewel-blue.css</path>
             </include-file>
           </includeFiles>
         </configuration>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ef0706e..782e6d5 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -14,6 +14,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+/* BUTTON */
 @namespace j "library://ns.apache.org/royale/jewel";
 @namespace "http://www.w3.org/1999/xhtml";
 .royale *, .royale *:before, .royale *:after {
@@ -28,72 +29,53 @@
   margin: 10px;
 }
 
-body {
-  font: 100% "Lato-Bold", sans-serif;
-  color: #006CEB;
-}
-
 /**
  * Jewel Button
  */
-.button, .button:hover {
-  cursor: pointer;
-  /* Background: */
-  border: 1px;
-  border-image-source: url(assets/JewelButton2.svg);
-  border-image-slice: 4;
-  border-image-width: 4;
-  background-image: linear-gradient(#3BB0FF, #1E36FA);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-clip: padding-box;
-}
-
-.button:focus {
-  outline: 0;
-}
-
-/**
- * Jewel TextButton
- */
-.textbutton, .textbutton:hover {
+.button, .textbutton {
   cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 0px;
+  min-width: 74px;
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField: */
+  /* TextField */
+  color: rgba(255, 255, 255, 0.4);
   font-family: "Lato-Bold", sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-  text-shadow: 0 1px 0 #555;
-  padding: 10px 0px;
-  display: inline-block;
-  min-width: 80px;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
 }
 
-.textbutton {
+.jewel-button--primary {
   background-color: #006CEB;
   transition-duration: 0.4s;
 }
-
-.textbutton:hover {
-  background-color: #3389EF;
+.jewel-button--primary:hover {
+  background-color: #0b7bff;
 }
-
-.textbutton:active {
-  background-color: #0056BC;
+.jewel-button--primary:active {
+  background-color: #005ecc;
 }
-
-.textbutton:focus {
+.jewel-button--primary:focus {
   outline: 0;
 }
-
-.textbutton[disabled] {
+.jewel-button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
+  cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.textbutton[disabled] {
   text-shadow: unset;
   cursor: unset;
+  /* TextField: */
 }
 
 /**
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
similarity index 75%
copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css
copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index ef0706e..76cae63 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -14,6 +14,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+/* BUTTON */
 @namespace j "library://ns.apache.org/royale/jewel";
 @namespace "http://www.w3.org/1999/xhtml";
 .royale *, .royale *:before, .royale *:after {
@@ -28,72 +29,53 @@
   margin: 10px;
 }
 
-body {
-  font: 100% "Lato-Bold", sans-serif;
-  color: #006CEB;
-}
-
 /**
  * Jewel Button
  */
-.button, .button:hover {
-  cursor: pointer;
-  /* Background: */
-  border: 1px;
-  border-image-source: url(assets/JewelButton2.svg);
-  border-image-slice: 4;
-  border-image-width: 4;
-  background-image: linear-gradient(#3BB0FF, #1E36FA);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-clip: padding-box;
-}
-
-.button:focus {
-  outline: 0;
-}
-
-/**
- * Jewel TextButton
- */
-.textbutton, .textbutton:hover {
+.button, .textbutton {
   cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 0px;
+  min-width: 74px;
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField: */
+  /* TextField */
+  color: rgba(255, 255, 255, 0.4);
   font-family: "Lato-Bold", sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-  text-shadow: 0 1px 0 #555;
-  padding: 10px 0px;
-  display: inline-block;
-  min-width: 80px;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
 }
 
-.textbutton {
+.jewel-button--primary {
   background-color: #006CEB;
   transition-duration: 0.4s;
 }
-
-.textbutton:hover {
-  background-color: #3389EF;
+.jewel-button--primary:hover {
+  background-color: #0b7bff;
 }
-
-.textbutton:active {
-  background-color: #0056BC;
+.jewel-button--primary:active {
+  background-color: #005ecc;
 }
-
-.textbutton:focus {
+.jewel-button--primary:focus {
   outline: 0;
 }
-
-.textbutton[disabled] {
+.jewel-button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
+  cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.textbutton[disabled] {
   text-shadow: unset;
   cursor: unset;
+  /* TextField: */
 }
 
 /**
@@ -139,4 +121,4 @@ TextField {
   text-align: left;
 }
 
-/*# sourceMappingURL=defaults.css.map */
+/*# sourceMappingURL=royale-jewel-blue.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 1ea71ab..376f994 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -16,28 +16,62 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
- 
+
 /**
  * Jewel Button
  */
-.button, .button:hover
-	
+%button-def
 	cursor: pointer
 	
+	display: inline-block
+	margin: 0 //1rem
+	padding: 10px 0px //.938em 1.875em
+	min-width: $button-min-width
+
 	/* Background: */
-	border: 1px // without this svg shows scaled and bigger
-	border-image-source: url(assets/JewelButton2.svg) 
-	border-image-slice: 4
-	border-image-width: 4
+	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)
+	
+	/* TextField */
+	color: $white
+	font:
+		family: $font-stack 
+		style: bold 
+		size: .7rem 
+	//+trans(0.2s ease-in-out)
+	text:
+		transform: uppercase
+		decoration: none 
+		//shadow: 0 .063em rgba(black,.3)
+
+.button
+	@extend %button-def
+
+.jewel-button--primary
+	+button-theme($primary-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-size: cover
-	background-repeat: no-repeat
-	background-clip: padding-box
+	//background-image: linear-gradient(#3BB0FF, #1E36FA);
 
-//.button:hover
+	//background-color: #006CEB;
+	//background-size: cover;
+	//background-repeat: no-repeat;
+	//background-clip: padding-box;
 
-//.button:active 
+	//background: url(assets/4slicewithpattern.svg);
+	//background-size: cover;
+	//width: fit-content;
+	//height: fit-content;
 
-.button:focus
-	outline: 0
+//.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/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
similarity index 74%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 46227a0..f4df725 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -17,12 +17,16 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-$font-stack: 'Lato-Bold', sans-serif
+@namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
 
-$primary-color: #006CEB
-$hover-color: #3389EF
-$active-color: #0056BC
-$disabled-color: #CCCCCC
 
-$font-normal-color: #fff
-$font-disabled-color: #888888
\ No newline at end of file
+.royale *, .royale *:before, .royale *:after
+	-moz-box-sizing: border-box
+	-webkit-box-sizing: border-box
+	box-sizing: border-box
+	/* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
+
+.royale
+	padding: 10px
+	margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 0c6fb82..10d21e4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -16,3 +16,27 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
+
+=button-theme($button-color)
+	//border-color: darken($button-color, 20%)
+	background-color: $button-color
+	transition:
+		duration: 0.4s
+	&: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
+
+//=trans($val...)
+//	-webkit-transition: $val
+//	-moz-transition: $val
+//	-o-transition: $val
+//	transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index ee1c655..4211663 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -20,73 +20,24 @@
 /**
  * Jewel TextButton
  */
-.textbutton, .textbutton:hover
-	
-	cursor: pointer
-	
-	/* Background: */
-	border: none
-	border-radius: 3px
-
-	//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;
-
-	/* 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
-
-	//background: url(assets/4slicewithpattern.svg);
-	//background-size: cover;
-	//width: fit-content;
-	//height: fit-content;
-	
-	//background: linear-gradient(#FF893B, #FA461E);
-	//border: 1px solid #A93116;
-	//border-radius: 3px;
-	//box-shadow: #E6B89B 0 1px 0 inset, #E6431D 0 -1px 0 inset, #aaa 0 1px 0 inset;
 
 .textbutton
-	background-color: $primary-color
-	transition-duration: 0.4s
-
-
-.textbutton:hover
-	background-color: $hover-color
-	
-	//background: linear-gradient(#FD9958, #F76943);
-	//border: 1px solid #BC573C;
-	//line-height:16px;
-	//padding: 8px 16px;
-
-.textbutton:active
-	background-color: $active-color
-	
-	//box-shadow: #E6431D 0 1px 0 inset;
-	//text-shadow: 0 -1px 0 #5F3A29;
-
-.textbutton:focus
-	outline: 0
+	@extend %button-def
 
 
 .textbutton[disabled]
-	background-color: $disabled-color
-	color: $font-disabled-color
-	text-shadow: unset
+	text:
+		shadow: unset
 	cursor: unset
 
+	/* 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
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 46227a0..90ff1c5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -19,10 +19,22 @@
 
 $font-stack: 'Lato-Bold', sans-serif
 
-$primary-color: #006CEB
-$hover-color: #3389EF
-$active-color: #0056BC
+// Common Colors
+$white: rgba(white,.4)
 $disabled-color: #CCCCCC
+$font-disabled-color: #888888
+
+// Color Themes
+$primary-color: #006CEB
+
+//$purple: #9A68C7
+//$blue: #3BA9E4
+//$green: #75B343
+//$orange: #FF6A42
+
+
+/* BUTTON */
+$button-min-width: 74px !default
+
+
 
-$font-normal-color: #fff
-$font-disabled-color: #888888
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 8fae5e5..7ad0fdd 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -15,24 +15,14 @@
  *  limitations under the License.
  */
 
-@import "variables"
-
-@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
-	/* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
-
-.royale
-	padding: 10px
-	margin: 10px
+// Variables
+@import "variables"
+@import "mixins"
+@import "functions"
 
-body
-	font: 100% $font-stack
-	color: $primary-color
+// Global
+@import "global"
 
 // Components
 @import "button"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
similarity index 68%
copy from frameworks/themes/JewelTheme/src/main/sass/defaults.sass
copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 8fae5e5..98d8247 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -15,26 +15,21 @@
  *  limitations under the License.
  */
 
+// Variables
 @import "variables"
+@import "mixins"
+@import "functions"
 
-@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
-	/* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
-
-.royale
-	padding: 10px
-	margin: 10px
-
-body
-	font: 100% $font-stack
-	color: $primary-color
+// Global
+@import "global"
 
 // Components
+
+// Button
 @import "button"
+
+// TextButton
 @import "textbutton"
-@import "textfield"
\ No newline at end of file
+
+// TextField
+@import "textfield"

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