Change variable naming

1 files changed, 18 insertions, 13 deletions

diff --git a/src/variables.less b/src/variables.less
index 097445c..3d59ec3 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,8 +6,8 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @font-size: 1.4rem;
-@sm-font-size: 1.2rem;
-@lg-font-size: 1.6rem;
+@font-size-sm: 1.2rem;
+@font-size-lg: 1.6rem;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@@ -23,24 +23,29 @@
 @border-radius: .2rem;
 @border-width: .1rem;
 
+// Colors
 // Core colors
 @primary-color: #5764c6;
-@dark-primary-color: darken(@primary-color, 3%);
-@light-primary-color: lighten(@primary-color, 3%);
+@primary-color-dark: darken(@primary-color, 3%);
+@primary-color-light: lighten(@primary-color, 3%);
 @secondary-color: lighten(@primary-color, 40%);
-@dark-secondary-color: darken(@secondary-color, 3%);
-@light-secondary-color: lighten(@secondary-color, 3%);
-@dark-color: #333;
-@dark-gray-color: #666;
+@secondary-color-dark: darken(@secondary-color, 3%);
+@secondary-color-light: lighten(@secondary-color, 3%);
+
+// Gray colors
 @gray-color: #999;
-@light-gray-color: #ccc;
-@light-color: #fff;
+@gray-color-darker: darken(@gray-color, 40%);
+@gray-color-dark: darken(@gray-color, 20%);
+@gray-color-light: lighten(@gray-color, 20%);
+@gray-color-lighter: lighten(@gray-color, 40%);
+
 @link-color: @primary-color;
-@dark-link-color: darken(@link-color, 10%);
+@link-color-dark: darken(@link-color, 10%);
 @border-color: #efefef;
+@border-color-dark: darken(@border-color, 13%);
 @bg-color: #f8f8f8;
-@dark-bg-color: darken(@bg-color, 3%);
-@light-bg-color: #fff;
+@bg-color-dark: darken(@bg-color, 3%);
+@bg-color-light: #fff;
 
 // Control colors
 @control-color-success: #32b643;