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 303327af6febcb36fb780d93df1a67a9555324fe
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Fri Mar 9 23:58:36 2018 +0100

    changes to get two initial themes blue and red
---
 .../src/main/royale/ButtonPlayGround.mxml          | 20 ++++-----
 .../main/royale/org/apache/royale/jewel/Button.as  |  4 +-
 frameworks/themes/JewelTheme/pom.xml               |  2 +-
 .../JewelTheme/src/main/resources/defaults.css     | 33 +++++++-------
 .../src/main/resources/royale-jewel-blue.css       | 33 +++++++-------
 .../{defaults.css => royale-jewel-red.css}         | 41 +++++++++--------
 .../themes/JewelTheme/src/main/sass/_button.sass   | 51 ++++++++--------------
 .../JewelTheme/src/main/sass/_textbutton.sass      | 25 ++++++++---
 .../JewelTheme/src/main/sass/_variables.sass       | 13 +-----
 .../_blue-color-palette.sass}                      | 22 +---------
 .../_red-color-palette.sass}                       | 22 +---------
 .../themes/JewelTheme/src/main/sass/defaults.sass  |  2 +-
 .../src/main/sass/royale-jewel-blue.sass           |  1 +
 ...oyale-jewel-blue.sass => royale-jewel-red.sass} |  1 +
 14 files changed, 107 insertions(+), 163 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml 
b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 3efb4df..218680a 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -38,30 +38,28 @@ limitations under the License.
        <js:Button/>
        <js:TextButton text="Basic"/>
 
-       <j:Button/>
-       <j:TextButton text="C" />
+       <j:Button primary="true"/>
+       <j:TextButton text="C" primary="true"/>
 
-       <j:TextButton text="Button"/>
-
-       <j:TextButton text="Button With More Text" />
+       <j:TextButton text="Button" primary="true"/>
 
-       <j:TextButton text="Button" width="120" height="40" />
+       <j:TextButton text="Button With More Text" primary="true"/>
 
+       <j:TextButton text="Button" width="120" height="40" primary="true"/>
        
        <j:TextButton text="Button" primary="true"/>
 
-       <j:TextButton text="Disabled" >
+       <j:TextButton text="Disabled" primary="true">
                <j:beads>
                        <j:Disabled/>
                </j:beads>
        </j:TextButton>
-       
 
-       <j:Slider id="slider" width="250" value="420" minimum="50" maximum="500"
+       <j:Slider id="slider" width="250" value="100" minimum="50" maximum="500"
                                valueChange="onValueChange(event)"/>
-       <j:Slider id="slider_v" width="250" value="440" minimum="50" 
maximum="500"
+       <j:Slider id="slider_v" width="250" value="100" minimum="50" 
maximum="500"
                                valueChange="onValueChange(event)"/>
 
-       <j:TextButton id="button" text="Button" width="420" height="440" />
+       <j:TextButton id="button" text="Button" width="100" height="100" 
primary="true"/>
 
 </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 938ed89..0d73362 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
@@ -86,7 +86,7 @@ package org.apache.royale.jewel
         private var _primary:Boolean = false;
 
         /**
-                *  A boolean flag to activate "jewel-button--primary" effect 
selector.
+                *  A boolean flag to activate "button--primary" effect 
selector.
                 *  Applies primary color display effect.
          *  Colors are defined in royale-jewel.css
          *
@@ -108,7 +108,7 @@ package org.apache.royale.jewel
 
                 COMPILE::JS
                 {
-                    addOrRemove("jewel-button--primary",value);
+                    addOrRemove("button--primary",value);
                     setClassName(computeFinalClassNames());
                 }
             }
diff --git a/frameworks/themes/JewelTheme/pom.xml 
b/frameworks/themes/JewelTheme/pom.xml
index 562dd07..702d626 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -65,7 +65,7 @@
               <path>../src/main/resources/defaults.css</path>
             </include-file> -->
             <include-file>
-              <name>royale-jewel-blue.css</name>
+              <name>royale-jewel-red.css</name>
               <path>../src/main/resources/royale-jewel-blue.css</path>
             </include-file>
           </includeFiles>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 782e6d5..c092842 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -14,7 +14,6 @@
  *  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 {
@@ -32,7 +31,7 @@
 /**
  * Jewel Button
  */
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
   cursor: pointer;
   display: inline-block;
   margin: 0;
@@ -41,29 +40,22 @@
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField */
-  color: rgba(255, 255, 255, 0.4);
-  font-family: "Lato-Bold", sans-serif;
-  font-style: bold;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  text-decoration: none;
 }
 
-.jewel-button--primary {
+.button--primary {
   background-color: #006CEB;
   transition-duration: 0.4s;
 }
-.jewel-button--primary:hover {
+.button--primary:hover {
   background-color: #0b7bff;
 }
-.jewel-button--primary:active {
+.button--primary:active {
   background-color: #005ecc;
 }
-.jewel-button--primary:focus {
+.button--primary:focus {
   outline: 0;
 }
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
   cursor: unset;
@@ -72,10 +64,17 @@
 /**
  * Jewel TextButton
  */
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+  /* TextField */
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.textbutton [disabled] {
   text-shadow: unset;
-  cursor: unset;
-  /* TextField: */
 }
 
 /**
diff --git 
a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css 
b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 76cae63..7d56600 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -14,7 +14,6 @@
  *  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 {
@@ -32,7 +31,7 @@
 /**
  * Jewel Button
  */
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
   cursor: pointer;
   display: inline-block;
   margin: 0;
@@ -41,29 +40,22 @@
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField */
-  color: rgba(255, 255, 255, 0.4);
-  font-family: "Lato-Bold", sans-serif;
-  font-style: bold;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  text-decoration: none;
 }
 
-.jewel-button--primary {
+.button--primary {
   background-color: #006CEB;
   transition-duration: 0.4s;
 }
-.jewel-button--primary:hover {
+.button--primary:hover {
   background-color: #0b7bff;
 }
-.jewel-button--primary:active {
+.button--primary:active {
   background-color: #005ecc;
 }
-.jewel-button--primary:focus {
+.button--primary:focus {
   outline: 0;
 }
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
   cursor: unset;
@@ -72,10 +64,17 @@
 /**
  * Jewel TextButton
  */
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+  /* TextField */
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.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-red.css
similarity index 85%
copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css
copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 782e6d5..56a785d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -14,7 +14,6 @@
  *  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 {
@@ -32,7 +31,7 @@
 /**
  * Jewel Button
  */
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
   cursor: pointer;
   display: inline-block;
   margin: 0;
@@ -41,29 +40,22 @@
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField */
-  color: rgba(255, 255, 255, 0.4);
-  font-family: "Lato-Bold", sans-serif;
-  font-style: bold;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  text-decoration: none;
 }
 
-.jewel-button--primary {
-  background-color: #006CEB;
+.button--primary {
+  background-color: #FF0000;
   transition-duration: 0.4s;
 }
-.jewel-button--primary:hover {
-  background-color: #0b7bff;
+.button--primary:hover {
+  background-color: #ff1f1f;
 }
-.jewel-button--primary:active {
-  background-color: #005ecc;
+.button--primary:active {
+  background-color: #e00000;
 }
-.jewel-button--primary:focus {
+.button--primary:focus {
   outline: 0;
 }
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
   cursor: unset;
@@ -72,10 +64,17 @@
 /**
  * Jewel TextButton
  */
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+  /* TextField */
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.textbutton [disabled] {
   text-shadow: unset;
-  cursor: unset;
-  /* TextField: */
 }
 
 /**
@@ -121,4 +120,4 @@ TextField {
   text-align: left;
 }
 
-/*# sourceMappingURL=defaults.css.map */
+/*# sourceMappingURL=royale-jewel-red.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass 
b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 376f994..8d416f2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -32,46 +32,31 @@
        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
+.button, .button:hover
        @extend %button-def
 
-.jewel-button--primary
+.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-color: #006CEB;
+//background-size: cover;
+//background-repeat: no-repeat;
+//background-clip: padding-box;
 
-       //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;
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
 
 //.button:active       
-       //box-shadow: #E6431D 0 1px 0 inset;
-       //text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
+//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/_textbutton.sass 
b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index 4211663..4cf7a0f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -20,17 +20,28 @@
 /**
  * Jewel TextButton
  */
-
-.textbutton
+%textbutton-def
        @extend %button-def
+       /* 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)
 
+       [disabled]
+               text:
+                       shadow: unset
 
-.textbutton[disabled]
-       text:
-               shadow: unset
-       cursor: unset
+.textbutton, .textbutton:hover
+       @extend %textbutton-def
 
-       /* TextField: */
+// /* TextField: */
 //     font-family: $font-stack
 //     font-size: 14px
 //     font-weight: bold
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass 
b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 90ff1c5..b1f1f39 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -20,20 +20,11 @@
 $font-stack: 'Lato-Bold', sans-serif
 
 // Common Colors
-$white: rgba(white,.4)
+$white: rgba(white,.9)
 $disabled-color: #CCCCCC
 $font-disabled-color: #888888
 
-// Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
+// Button variables
 $button-min-width: 74px !default
 
 
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass 
b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to 
frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
index 90ff1c5..fbe84c7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -16,25 +16,5 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-
-$font-stack: 'Lato-Bold', sans-serif
-
-// 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
-
-
-
+$primary-color: #006CEB
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass 
b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to 
frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
index 90ff1c5..b1af604 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -16,25 +16,5 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-
-$font-stack: 'Lato-Bold', sans-serif
-
-// 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
-
-
-
+$primary-color: #FF0000
\ 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 7ad0fdd..5f5343c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -15,8 +15,8 @@
  *  limitations under the License.
  */
 
-
 // Variables
+@import "colors/blue-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass 
b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 98d8247..3c82eb7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -16,6 +16,7 @@
  */
 
 // Variables
+@import "colors/blue-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass 
b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
similarity index 96%
copy from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
index 98d8247..54e8f75 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -16,6 +16,7 @@
  */
 
 // Variables
+@import "colors/red-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"

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

Reply via email to