Merge pull request #1670 from locaweb/new-themes

Novas cores de tema
locaweb · Mar 28, 2016 · 7601025 · 7601025
2 parents 2f6f110 + cf04d13
commit 7601025
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 41 deletions.
diff --git a/data/themes.yml b/data/themes.yml
@@ -0,0 +1,16 @@
+ls-theme-dark-yellow: Amarelo Escuro
+ls-theme-yellow-gold: Amarelo Ouro
+ls-theme-blue: Azul
+ls-theme-indigo: Azull Índigo
+ls-theme-turquoise: Azul Turquesa
+ls-theme-light-blue: Azul Claro
+ls-theme-gray: Cinza
+ls-theme-gold: Dourado
+ls-theme-orange: Laranja
+ls-theme-light-brown: Marrom Claro
+ls-theme-purple: Roxo
+ls-theme-green: Verde
+ls-theme-light-green: Verde Claro
+ls-theme-green-lemon: Verde Limão
+ls-theme-moss: Verde Musgo
+ls-theme-light-red: Vermelho Claro
diff --git a/source/assets/stylesheets/locastyle/base/_variable-colors.scss b/source/assets/stylesheets/locastyle/base/_variable-colors.scss
@@ -13,6 +13,14 @@ $color-cyanogen:    #00c9f5;
 $color-light-red:   #ef1e37;
 $color-wine:        #513335;
 $color-moss:        #679511;
+$color-indigo:      #00417b;
+$color-turquoise:   #3b949c;
+$color-light-blue:  #5c90c4;
+$color-light-brown: #654445;
+$color-green-lemon: #94c83c;
+$color-purple:      #5a2dc0;
+$color-dark-yellow: #b19b22;
+$color-yellow-gold: #ffb500;
 
 // Color that will be mixed with the main color of each theme.
 $color-mix: #000;
@@ -31,7 +39,15 @@ $themes-colors: (
   wine        : (color1: $color-wine, color2: mix($color-mix, $color-wine, $color-mix-percent)),
   cyanogen    : (color1: $color-cyanogen, color2: mix($color-mix, $color-cyanogen, $color-mix-percent)),
   light-red   : (color1: $color-light-red, color2: mix($color-mix, $color-light-red, $color-mix-percent)),
-  moss        : (color1: $color-moss, color2: mix($color-mix, $color-moss, $color-mix-percent))
+  moss        : (color1: $color-moss, color2: mix($color-mix, $color-moss, $color-mix-percent)),
+  indigo      : (color1: $color-indigo, color2: mix($color-mix, $color-indigo, $color-mix-percent)),
+  turquoise   : (color1: $color-turquoise, color2: mix($color-mix, $color-turquoise, $color-mix-percent)),
+  light-blue  : (color1: $color-light-blue, color2: mix($color-mix, $color-light-blue, $color-mix-percent)),
+  light-brown : (color1: $color-light-brown, color2: mix($color-mix, $color-light-brown, $color-mix-percent)),
+  green-lemon : (color1: $color-green-lemon, color2: mix($color-mix, $color-green-lemon, $color-mix-percent)),
+  purple      : (color1: $color-purple, color2: mix($color-mix, $color-purple, $color-mix-percent)),
+  dark-yellow : (color1: $color-dark-yellow, color2: mix($color-mix, $color-dark-yellow, $color-mix-percent)),
+  yellow-gold : (color1: $color-yellow-gold, color2: mix($color-mix, $color-yellow-gold, $color-mix-percent))
 );
 
 //

diff --git a/source/documentacao/css/cores-do-tema.html.erb b/source/documentacao/css/cores-do-tema.html.erb
@@ -19,53 +19,22 @@ description: Insira cores no seu projeto.
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td>ls-theme-green</td>
-        <td>Tema verde</td>
-      </tr>
-      <tr>
-        <td>ls-theme-light-green</td>
-        <td>Tema verde claro</td>
-      </tr>
-      <tr>
-        <td>ls-theme-blue</td>
-        <td>Tema Azul</td>
-      </tr>
-      <tr>
-        <td>ls-theme-gold</td>
-        <td>Tema dourada</td>
-      </tr>
-      <tr>
-        <td>ls-theme-gray</td>
-        <td>Tema cinza</td>
-      </tr>
-      <tr>
-        <td>ls-theme-orange</td>
-        <td>Tema laranja</td>
-      </tr>
-      <tr>
-        <td>ls-theme-light-red</td>
-        <td>Tema Vermelho claro</td>
-      </tr>
-      <tr>
-        <td>ls-theme-moss</td>
-        <td>Tema verde musgo</td>
-      </tr>
+      <% data.themes.each do |theme| %>
+        <tr>
+          <td><%= theme[0] %></td>
+          <td><%= theme[1] %></td>
+        </tr>
+      <% end %>
     </tbody>
   </table>
 
   <p>Clique nos links abaixo para ter uma ideia de como o layout poderá ficar:</p>
 
   <div class="ls-box-demo">
     <div class="doc-test-themes ls-group-btn ls-group-active">
-      <a href="#" class="ls-btn-primary ls-active" data-toggle-class="ls-theme-green" data-target="html">Verde</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-light-green" data-target="html">Verde claro</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-blue" data-target="html">Azul</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-gold" data-target="html">Dourado</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-gray" data-target="html">Cinza</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-orange" data-target="html">Laranja</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-light-red" data-target="html">Vermelho claro</a>
-      <a href="#" class="ls-btn-primary" data-toggle-class="ls-theme-moss" data-target="html">Verde musgo</a>
+      <% data.themes.each do |theme| %>
+        <a href="#" class="ls-btn-primary" data-toggle-class="<%= theme[0] %>" data-target="html"><%= theme[1] %></a>
+      <% end %>
     </div>
     <br>
     <br>