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: - Add theme styles: flat / gradient - Add light / dark styles - Add more variables to tune final themes - Adjust some values for better looking
Date Wed, 21 Mar 2018 09:44:44 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 ed2b477  - Add theme styles: flat / gradient - Add light / dark styles - Add more
variables to tune final themes - Adjust some values for better looking
ed2b477 is described below

commit ed2b4773fbb0d5bc844a3217f752b6cb2e6de16d
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Wed Mar 21 10:44:41 2018 +0100

    - Add theme styles: flat / gradient
    - Add light / dark styles
    - Add more variables to tune final themes
    - Adjust some values for better looking
---
 .../JewelTheme/src/main/resources/defaults.css     | 107 ++++++---------------
 .../src/main/sass/_default-color-palette.sass      |  22 +++--
 .../JewelTheme/src/main/sass/_variables.sass       |   2 +
 .../src/main/sass/components/_button.sass          |  30 ++++--
 .../src/main/sass/components/_textbutton.sass      |  38 +++++---
 5 files changed, 93 insertions(+), 106 deletions(-)

diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 6e720c5..53d0f88 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -34,20 +34,15 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #d9d9d9;
   border-radius: 3px;
-  border: 1px solid #b3b3b3;
-  background: linear-gradient(#e6e6e6, #cccccc);
-  box-shadow: inset 0 1px 0 white;
 }
 .jewel.button:hover {
-  border: 1px solid #a6a6a6;
-  background: linear-gradient(#d9d9d9, silver);
+  background: #cccccc;
 }
 .jewel.button:active {
-  border: 1px solid #8d8d8d;
-  background: linear-gradient(silver, #a6a6a6);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #b3b3b3;
 }
 .jewel.button:focus {
   outline: 0;
@@ -66,20 +61,15 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #3CADF1;
   border-radius: 3px;
-  border: 1px solid #0f88d1;
-  background: linear-gradient(#54b7f3, #24a3ef);
-  box-shadow: inset 0 1px 0 #9bd5f8;
 }
 .jewel.button.primary:hover {
-  border: 1px solid #0d79ba;
-  background: linear-gradient(#3CADF1, #1198e9);
+  background: #24a3ef;
 }
 .jewel.button.primary:active {
-  border: 1px solid #0a5a8a;
-  background: linear-gradient(#1198e9, #0d79ba);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #0f88d1;
 }
 .jewel.button.primary:focus {
   outline: 0;
@@ -98,20 +88,15 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #EF5A2A;
   border-radius: 3px;
-  border: 1px solid #be390e;
-  background: linear-gradient(#f16c42, #ed4812);
-  box-shadow: inset 0 1px 0 #f6a389;
 }
 .jewel.button.secondary:hover {
-  border: 1px solid #a6320d;
-  background: linear-gradient(#EF5A2A, #d64010);
+  background: #ed4812;
 }
 .jewel.button.secondary:active {
-  border: 1px solid #772409;
-  background: linear-gradient(#d64010, #a6320d);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #be390e;
 }
 .jewel.button.secondary:focus {
   outline: 0;
@@ -130,20 +115,15 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #3AB549;
   border-radius: 3px;
-  border: 1px solid #277b32;
-  background: linear-gradient(#45c354, #34a241);
-  box-shadow: inset 0 1px 0 #7fd68a;
 }
 .jewel.button.emphasized:hover {
-  border: 1px solid #21682a;
-  background: linear-gradient(#3AB549, #2e8e39);
+  background: #34a241;
 }
 .jewel.button.emphasized:active {
-  border: 1px solid #15411a;
-  background: linear-gradient(#2e8e39, #21682a);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #277b32;
 }
 .jewel.button.emphasized:focus {
   outline: 0;
@@ -167,11 +147,9 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #d9d9d9;
   border-radius: 3px;
-  border: 1px solid #b3b3b3;
-  background: linear-gradient(#e6e6e6, #cccccc);
-  box-shadow: inset 0 1px 0 white;
   font-family: "Lato", sans-serif;
   font-size: 14px;
   font-weight: bold;
@@ -180,13 +158,10 @@
   text-decoration: none;
 }
 .jewel.textbutton:hover {
-  border: 1px solid #a6a6a6;
-  background: linear-gradient(#d9d9d9, silver);
+  background: #cccccc;
 }
 .jewel.textbutton:active {
-  border: 1px solid #8d8d8d;
-  background: linear-gradient(silver, #a6a6a6);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #b3b3b3;
 }
 .jewel.textbutton:focus {
   outline: 0;
@@ -208,27 +183,21 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #3CADF1;
   border-radius: 3px;
-  border: 1px solid #0f88d1;
-  background: linear-gradient(#54b7f3, #24a3ef);
-  box-shadow: inset 0 1px 0 #9bd5f8;
   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);
+  background: #24a3ef;
 }
 .jewel.textbutton.primary:active {
-  border: 1px solid #0a5a8a;
-  background: linear-gradient(#1198e9, #0d79ba);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #0f88d1;
 }
 .jewel.textbutton.primary:focus {
   outline: 0;
@@ -250,27 +219,21 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #EF5A2A;
   border-radius: 3px;
-  border: 1px solid #be390e;
-  background: linear-gradient(#f16c42, #ed4812);
-  box-shadow: inset 0 1px 0 #f6a389;
   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);
+  background: #ed4812;
 }
 .jewel.textbutton.secondary:active {
-  border: 1px solid #772409;
-  background: linear-gradient(#d64010, #a6320d);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #be390e;
 }
 .jewel.textbutton.secondary:focus {
   outline: 0;
@@ -292,27 +255,21 @@
   padding: 10px 16px;
   min-width: 74px;
   min-height: 34px;
-  /* Background: */
+  border: 0px solid;
+  background: #3AB549;
   border-radius: 3px;
-  border: 1px solid #277b32;
-  background: linear-gradient(#45c354, #34a241);
-  box-shadow: inset 0 1px 0 #7fd68a;
   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);
+  background: #34a241;
 }
 .jewel.textbutton.emphasized:active {
-  border: 1px solid #15411a;
-  background: linear-gradient(#2e8e39, #21682a);
-  box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+  background: #277b32;
 }
 .jewel.textbutton.emphasized:focus {
   outline: 0;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index a4cfa7c..4b25446 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -17,6 +17,7 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
+// CONSTANTS
 // 12 Color Themes (this will go to one separate project each one)
 $red: #EC1C24
 $amethyst: #922590
@@ -30,15 +31,22 @@ $yellow: #FCEF0A
 $sunflower: #F8B13F
 $orange: #F7941D
 $topaz: #EF5A2A
+$font-theme-color: #FFFFFF
 
-// Common Colors
-$font-color: #FFFFFF
-$default-color: #d9d9d9
-$default-font-color: #808080
-$disabled-color: #F9F9F9
+$light-color: #d9d9d9
+$font-light-color: #808080
 
-// Var Colors
-$default-color: $default-color
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+
+// VARIABLES
+$default-color: $light-color  // change this from light to dark
 $primary-color: $blue
 $secondary-color: $topaz
 $emphasized-color: $green
+
+$default-font-color: $font-light-color // change this from light to dark
+$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 9a5fef9..73291fb 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -26,5 +26,7 @@ $button-padding: 10px 16px !default
 $button-min-height: 34px !default
 $button-min-width: 74px !default
 
+$button-border-radius: 3px
+
 
 
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index fc76a5a..99e4e04 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -24,20 +24,30 @@
 	padding: $button-padding //.938em 1.875em
 	min-width: $button-min-width
 	min-height: $button-min-height
-	/* Background: */
-	border-radius: 3px //.625em
-	border: 1px solid darken($button-color, 15%)// .094em solid 
-	background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
-	box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+	
+	@if $flat
+		border: 0px solid
+		background: $button-color
+	@else
+		border: 1px solid darken($button-color, 15%)// .094em solid 
+		background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+		box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+	border-radius: $button-border-radius //.625em
 	//transition:
 	//	duration: 0.4s
 	&:hover
-		border: 1px solid darken($button-color, 20%)// .094em solid 
-		background: linear-gradient($button-color, darken($button-color, 10%))
+		@if $flat
+			background: darken($button-color, 5%)
+		@else
+			border: 1px solid darken($button-color, 20%)// .094em solid 
+			background: linear-gradient($button-color, darken($button-color, 10%))
 	&:active
-		border: 1px solid darken($button-color, 30%)// .094em solid 
-		background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
-		box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+		@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: 0
 	&[disabled]
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index d081579..b5d2be4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -25,11 +25,15 @@
 	padding: $button-padding //.938em 1.875em
 	min-width: $button-min-width
 	min-height: $button-min-height
-	/* Background: */
-	border-radius: 3px //.625em
-	border: 1px solid darken($button-color, 15%)// .094em solid 
-	background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
-	box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+	
+	@if $flat
+		border: 0px solid
+		background: $button-color
+	@else
+		border: 1px solid darken($button-color, 15%)// .094em solid 
+		background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+		box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+	border-radius: $button-border-radius //.625em
 	//transition:
 	//	duration: 0.4s
 	font:
@@ -40,15 +44,21 @@
 	text:
 		transform: uppercase
 		decoration: none 
-	@if $text-color == $font-color     
+	@if not $flat and $text-color == $font-theme-color
 		shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
 	&:hover
-		border: 1px solid darken($button-color, 20%)// .094em solid 
-		background: linear-gradient($button-color, darken($button-color, 10%))
+		@if $flat
+			background: darken($button-color, 5%)
+		@else
+			border: 1px solid darken($button-color, 20%)// .094em solid 
+			background: linear-gradient($button-color, darken($button-color, 10%))
 	&:active
-		border: 1px solid darken($button-color, 30%)// .094em solid 
-		background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
-		box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+		@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: 0
 	&[disabled]
@@ -66,10 +76,10 @@
 	+textbutton-theme($default-color, $default-font-color)
 
 .jewel.textbutton.primary
-	+textbutton-theme($primary-color, $font-color)
+	+textbutton-theme($primary-color, $font-theme-color)
 
 .jewel.textbutton.secondary
-	+textbutton-theme($secondary-color, $font-color)
+	+textbutton-theme($secondary-color, $font-theme-color)
 
 .jewel.textbutton.emphasized
-	+textbutton-theme($emphasized-color, $font-color)
+	+textbutton-theme($emphasized-color, $font-theme-color)

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

Mime
View raw message