restructure theming strategy

rcaferati · Jan 12, 2018 · b6059c1 · b6059c1
1 parent d198614
commit b6059c1
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 73 deletions.
diff --git a/src/demo/data.js b/src/demo/data.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import AwesomeButton from '../component';
-import AwsBtnStyles from '../styles/default.scss';
-import AwsBtnStylesThemeTwo from '../styles/themes/theme-two.scss';
+import AwsBtnStyles from '../styles/styles.scss';
+import AwsBtnStylesThemeTwo from '../styles/themes/theme-two/styles.scss';
 
 const Div = props => (<div {... props} />);
 
@@ -37,7 +37,7 @@ const examples = [
   size="icon"
   bubbles
 >
-  <i className="fa fa-facebook" aria-hidden />
+  <i className="fa fa-facebook" />
 </AwesomeButton>
 ...`,
     button: (
@@ -49,7 +49,7 @@ const examples = [
           bubbles
           moveEvents={false}
         >
-          <i className="fa fa-facebook" aria-hidden />
+          <i className="fa fa-facebook" />
         </AwesomeButton>
         <AwesomeButton
           cssModule={AwsBtnStyles}
@@ -58,7 +58,7 @@ const examples = [
           bubbles
           moveEvents={false}
         >
-          <i className="fa fa-twitter" aria-hidden />
+          <i className="fa fa-twitter" />
         </AwesomeButton>
         <AwesomeButton
           cssModule={AwsBtnStyles}
@@ -67,7 +67,7 @@ const examples = [
           bubbles
           moveEvents={false}
         >
-          <i className="fa fa-github" aria-hidden />
+          <i className="fa fa-github" />
         </AwesomeButton>
         <AwesomeButton
           cssModule={AwsBtnStyles}
@@ -76,7 +76,7 @@ const examples = [
           bubbles
           moveEvents={false}
         >
-          <i className="fa fa-linkedin" aria-hidden />
+          <i className="fa fa-linkedin" />
         </AwesomeButton>
         <AwesomeButton
           cssModule={AwsBtnStyles}
@@ -85,7 +85,7 @@ const examples = [
           bubbles
           moveEvents={false}
         >
-          <i className="fa fa-whatsapp" aria-hidden />
+          <i className="fa fa-whatsapp" />
         </AwesomeButton>
         <AwesomeButton
           cssModule={AwsBtnStyles}
@@ -94,7 +94,7 @@ const examples = [
           bubbles
           moveEvents={false}
         >
-          <i className="fa fa-instagram" aria-hidden />
+          <i className="fa fa-instagram" />
         </AwesomeButton>
       </div>
     ),

diff --git a/src/demo/demo.js b/src/demo/demo.js
@@ -21,6 +21,9 @@ const renderExamples = () => Data.examples.map((example, index) => (
       {example.description && <p>{example.description}</p>}
     </div>
     <div>
+      <div className={Styles.buttons}>
+        {example.button}
+      </div>
       {example.scss && (
         <pre>
           <h4>.scss</h4>
@@ -50,9 +53,6 @@ const renderExamples = () => Data.examples.map((example, index) => (
         />
       </pre>
     </div>
-    <div className={Styles.buttons}>
-      {example.button}
-    </div>
   </li>
 ));
 

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
@@ -1,7 +1,7 @@
-@mixin color-pattern($background, $color) {
+@mixin color-pattern($background, $darker, $color) {
   .#{$button-root}__wrapper {
     &:before {
-      background-color: darken( $background, 17% );
+      background-color: $darker;
     }
   }
   .#{$button-root}__content {
@@ -23,23 +23,25 @@
 }
 
 @mixin getColors($colors) {
-  @each $color in $colors {
-    &--#{nth($color, 1)} {
-        @include color-pattern(nth($color, 2), nth($color, 3));
-    }
-  }
-}
-
-@mixin getColorsBackgroundManual($colors) {
   @if($colors) {
     @each $color in $colors {
       &--#{nth($color, 1)} {
-          @include color-pattern-background-manual(nth($color, 2), nth($color, 3), nth($color, 4));
+          @include color-pattern(nth($color, 2), nth($color, 3), nth($color, 4));
       }
     }
   }
 }
 
+// @mixin getColorsBackgroundManual($colors) {
+//   @if($colors) {
+//     @each $color in $colors {
+//       &--#{nth($color, 1)} {
+//           @include color-pattern-background-manual(nth($color, 2), nth($color, 3), nth($color, 4));
+//       }
+//     }
+//   }
+// }
+
 @mixin getSizes($sizes) {
   @each $size in $sizes {
     &--#{nth($size, 1)} {
@@ -207,7 +209,7 @@
 		transition: transform $transform-speed * 0.8 ease-out, background $transform-speed * 0.8 ease-out;
   }
   @include getColors($button-colors);
-  @include getColorsBackgroundManual($button-colors-bg-manual);
+  // @include getColorsBackgroundManual($button-colors-bg-manual);
   &--placeholder {
     width: $button-default-placeholder-width;
     .#{$button-root}__content {

diff --git a/src/styles/base/variables.scss b/src/styles/base/variables.scss
@@ -17,40 +17,156 @@ $button-raise-level: 2px;
 $button-hover-pressure: 1;
 
 $button-color-primary: #325c99;
-$button-color-secondary: #e53935;
+$button-color-secondary: #afafaf;
 $button-color-disabled: #9E9E9E;
 $button-color-placeholder: #BABABA;
 
 $loading-transition-speed: 6s;
 $transform-speed: 0.150s;
 
+// Share button Colors
+$button-color-facebook: #4868ad;
+$button-color-messenger: #3186f6;
+$button-color-twitter: #00aced;
+$button-color-linkedin: #0077b5;
+$button-color-whatsapp: #25d366;
+$button-color-github: #25d366;
+$button-color-reddit: #25d366;
+$button-color-pinterest: #25d366;
+$button-color-gplus: #25d366;
+$button-color-youtube: #cc181e;
+$button-color-instagram-radial-lighten: radial-gradient(circle at 25% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
+$button-color-instagram-radial-darken: radial-gradient(circle at 25% 110%, #b9a800 0%, #938500 5%, #b10f00 45%,#8c0061 60%,#002ca9 90%);
+
 /**
- button-color: color-name, background, color
+ button-color: color-name, background, darken-background, font-color
 */
 $button-colors:
-  ("primary", $button-color-primary, lighten($button-color-primary, 55%)),
-  ("secondary", $button-color-secondary, lighten($button-color-secondary, 55%)),
-  ("disabled", $button-color-disabled, lighten($button-color-disabled, 15%)),
-  ("placeholder", $button-color-placeholder, lighten($button-color-placeholder, 15%)),
-  ("facebook", #4868ad, #FFFFFF),
-  ("messenger", #3186f6, #FFFFFF),
-  ("twitter", #00aced, #FFFFFF),
-  ("linkedin", #0077b5, #FFFFFF),
-  ("whatsapp", #25d366, #FFFFFF),
-  ("github", #4e545a, #FFFFFF),
-  ("reddit", #fc461e, #FFFFFF),
-  ("pinterest", #bd091c, #FFFFFF),
-  ("gplus", #ce5b4e, #FFFFFF);
+  (
+    "primary",
+    $button-color-primary,
+    darken($button-color-primary, 17%),
+    lighten($button-color-primary, 55%)
+  ),
+  (
+    "secondary",
+    $button-color-secondary,
+    darken($button-color-secondary, 17%),
+    darken($button-color-secondary, 45%)
+  ),
+  (
+    "disabled",
+    $button-color-disabled,
+    darken($button-color-disabled, 17%),
+    lighten($button-color-disabled, 15%)
+  ),
+  (
+    "placeholder",
+    $button-color-placeholder,
+    darken($button-color-placeholder, 17%),
+    lighten($button-color-placeholder, 15%)
+  );
+
+  /**
+   button-social-color: color-name, background, darken-background, font-color
+  */
+$button-social-colors:
+  (
+    "facebook",
+    $button-color-facebook,
+    darken($button-color-facebook, 17%),
+    #FFFFFF
+  ),
+  (
+    "messenger",
+    $button-color-messenger,
+    darken($button-color-messenger, 17%),
+    #FFFFFF
+  ),
+  (
+    "twitter",
+    $button-color-twitter,
+    darken($button-color-twitter, 17%),
+    #FFFFFF
+  ),
+  (
+    "linkedin",
+    $button-color-linkedin,
+    darken($button-color-linkedin, 17%),
+    #FFFFFF
+  ),
+  (
+    "whatsapp",
+    $button-color-whatsapp,
+    darken($button-color-whatsapp, 17%),
+    #FFFFFF
+  ),
+  (
+    "github",
+    $button-color-github,
+    darken($button-color-github, 17%),
+    #FFFFFF
+  ),
+  (
+    "reddit",
+    $button-color-reddit,
+    darken($button-color-reddit, 17%),
+    #FFFFFF
+  ),
+  (
+    "pinterest",
+    $button-color-pinterest,
+    darken($button-color-pinterest, 17%),
+    #FFFFFF
+  ),
+  (
+    "gplus",
+    $button-color-gplus,
+    darken($button-color-gplus, 17%),
+    #FFFFFF
+  ),
+  (
+    "gplus",
+    $button-color-youtube,
+    darken($button-color-youtube, 17%),
+    #FFFFFF
+  ),
+  (
+    "instagram",
+    $button-color-instagram-radial-lighten,
+    $button-color-instagram-radial-darken,
+    #FFFFFF
+  );
 
 /**
  button-size: size-name, width, height, font-size, line-height
 */
 $button-sizes:
-  ("icon", 44px, $button-default-height, $button-default-font-size * 1.6, $button-default-line-height * 1.6)
-  ("small", 88px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("medium", 132px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("large", 196px, $button-default-height, $button-default-font-size, $button-default-line-height);
-
-$button-colors-bg-manual:
-  ("instagram", radial-gradient(circle at 25% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%), radial-gradient(circle at 25% 110%, #b9a800 0%, #938500 5%, #b10f00 45%,#8c0061 60%,#002ca9 90%), #FFFFFF),
-  ("youtube", #cc181e, #5d0003, #FFFFFF);
+  (
+    "icon",
+    44px,
+    $button-default-height,
+    $button-default-font-size * 1.6,
+    $button-default-line-height * 1.6
+  )
+  (
+    "small",
+    88px,
+    $button-default-height,
+    $button-default-font-size,
+    $button-default-line-height
+  )
+  (
+    "medium",
+    132px,
+    $button-default-height,
+    $button-default-font-size,
+    $button-default-line-height
+  )
+  (
+    "large",
+    196px,
+    $button-default-height,
+    $button-default-font-size,
+    $button-default-line-height
+  );
diff --git a/src/styles/themes/theme-one/styles.scss b/src/styles/themes/theme-one/styles.scss
@@ -1,4 +1,4 @@
-@import '../../base/variables.scss';
+@import '../../base/constants.scss';
 
 $button-default-border-radius: 2px;
 $button-horizontal-padding: 20px;

diff --git a/src/styles/themes/theme-three/styles.scss b/src/styles/themes/theme-three/styles.scss
@@ -9,13 +9,23 @@ $transform-speed: 0.175s;
  button-color: color-name, background, color
 */
 $button-colors:
-  ("primary", $button-color-primary, lighten($button-color-primary, 65%)),
-  ("secondary", $button-color-secondary, lighten($button-color-secondary, 55%)),
-  ("disabled", $button-color-disabled, lighten($button-color-disabled, 15%)),
-  ("facebook", #3b5998, #FFFFFF),
-  ("twitter", #00aced, #FFFFFF),
-  ("linkedin", #0077b5, #FFFFFF),
-  ("whatsapp", #25d366, #FFFFFF),
-  ("github", #4e545a, #FFFFFF);
+  (
+    "primary",
+    $button-color-primary,
+    darken($button-color-primary, 17%),
+    lighten($button-color-primary, 65%)
+  ),
+  (
+    "secondary",
+    $button-color-secondary,
+    darken($button-color-secondary, 17%),
+    lighten($button-color-secondary, 55%)
+  ),
+  (
+    "disabled",
+    $button-color-disabled,
+    darken($button-color-disabled, 17%),
+    lighten($button-color-disabled, 15%)
+  );
 
 @import '../../base/main.scss';