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
commit 465f13206bd86870fbd0b7465bae953b1d0cf1f2 Author: Carlos Rovira <[email protected]> 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 [email protected].
