Update variable names (#46)

joer9514 · web-flow · commit 2c0a25c70c2f · 2024-04-01T20:31:22.000-05:00
Update variable names width format : `$&lt;propertie&gt; - &lt;value&gt;`

example:

`$font-family`
diff --git a/packages/core/src/base/_generics.scss b/packages/core/src/base/_generics.scss
@@ -1,6 +1,6 @@
 body {
-  color: $color_dark;
-  background-color: $color_light;
-  font-family: $font;
+  color: $color-dark;
+  background-color: $color-light;
+  font-family: $font-family;
   font-size: px-to-rem(18px);
 }
diff --git a/packages/core/src/settings/_colors.scss b/packages/core/src/settings/_colors.scss
@@ -1,21 +1,21 @@
-$color_light: #f2efeb;
-$color_dark: #261501;
+$color-light: #f2efeb;
+$color-dark: #261501;
 
-$color_green: #0fd9a4;
-$color_light_green: #53dfba;
-$color_dark_green: #21594a;
+$color-green: #0fd9a4;
+$color-light-green: #53dfba;
+$color-dark-green: #21594a;
 
-$color_blue: #049dd9;
-$color_light_blue: #47b4df;
-$color_dark_blue: #1d4859;
+$color-blue: #049dd9;
+$color-light-blue: #47b4df;
+$color-dark-blue: #1d4859;
 
-$color_red: #d9471a;
-$color_light_red: #df7c5e;
-$color_dark_red: #593225;
+$color-red: #d9471a;
+$color-light-red: #df7c5e;
+$color-dark-red: #593225;
 
-$color_yellow: #d9a81a;
-$color_light_yellow: #dfbf5e;
-$color_dark_yellow: #594c25;
+$color-yellow: #d9a81a;
+$color-light-yellow: #dfbf5e;
+$color-dark-yellow: #594c25;
 
-$primary_color: $color_light_green;
-$secondary_color: $color_green;
+$primary-color: $color-light-green;
+$secondary-color: $color-green;
diff --git a/packages/core/src/settings/_fonts.scss b/packages/core/src/settings/_fonts.scss
@@ -1 +1 @@
-$font: "Roboto", sans-serif;
+$font-family: "Roboto", sans-serif;
diff --git a/packages/core/src/settings/_variables.scss b/packages/core/src/settings/_variables.scss
@@ -1 +1 @@
-$container_width: 70vw;
+$container-width: 70vw;
diff --git a/packages/utilities-class/src/components/_form.scss b/packages/utilities-class/src/components/_form.scss
@@ -1,16 +1,16 @@
 form {
-  font-family: $font;
+  font-family: $font-family;
 
   & .input {
     padding: 10px 15px;
     border-radius: 3px;
-    border: 1px solid $color_light;
+    border: 1px solid $color-light;
     width: 100%;
     margin-bottom: 20px;
   }
 
   &:focus {
-    border: 1px solid $color_green;
+    border: 1px solid $color-green;
     outline: none;
   }
 }
diff --git a/packages/utilities-class/src/components/_nav.scss b/packages/utilities-class/src/components/_nav.scss
@@ -11,7 +11,7 @@
   }
 
   & a {
-    color: $color_light;
+    color: $color-light;
     text-decoration: none;
     display: flex;
     align-items: center;
diff --git a/packages/utilities-class/src/layout/_container.scss b/packages/utilities-class/src/layout/_container.scss
@@ -1,6 +1,6 @@
 .container {
   max-width: 90%;
-  width: $container_width;
+  width: $container-width;
   margin: 20px auto;
   overflow: hidden;
 }
diff --git a/packages/utilities-class/src/utilities/_bg-color.scss b/packages/utilities-class/src/utilities/_bg-color.scss
@@ -1,127 +1,127 @@
 // Background Colors
 .bg-light {
-  background-color: $color_light;
+  background-color: $color-light;
 }
 
 .bg-dark {
-  background-color: $color_dark;
+  background-color: $color-dark;
 }
 
 .bg-green {
-  background-color: $color_green;
+  background-color: $color-green;
 }
 
 .bg-light-green {
-  background-color: $color_light_green;
+  background-color: $color-light-green;
 }
 
 .bg-dark-green {
-  background-color: $color_dark_green;
+  background-color: $color-dark-green;
 }
 
 .bg-blue {
-  background-color: $color_blue;
+  background-color: $color-blue;
 }
 
 .bg-light-blue {
-  background-color: $color_light_blue;
+  background-color: $color-light-blue;
 }
 
 .bg-dark-blue {
-  background-color: $color_dark_blue;
+  background-color: $color-dark-blue;
 }
 
 .bg-red {
-  background-color: $color_red;
+  background-color: $color-red;
 }
 
 .bg-light-red {
-  background-color: $color_light_red;
+  background-color: $color-light-red;
 }
 
 .bg-dark-red {
-  background-color: $color_dark_red;
+  background-color: $color-dark-red;
 }
 
 .bg-yellow {
-  background-color: $color_yellow;
+  background-color: $color-yellow;
 }
 
 .bg-light-yellow {
-  background-color: $color_light_yellow;
+  background-color: $color-light-yellow;
 }
 
 .bg-dark-yellow {
-  background-color: $color_dark_yellow;
+  background-color: $color-dark-yellow;
 }
 
 // Hover and active colors
 .hover-bg-light:hover,
 .hover-bg-light:active {
-  background-color: $color_light;
+  background-color: $color-light;
 }
 
 .hover-bg-dark:hover,
 .hover-bg-dark:active {
-  background-color: $color_dark;
+  background-color: $color-dark;
 }
 
 .hover-bg-green:hover,
 .hover-bg-green:active {
-  background-color: $color_green;
+  background-color: $color-green;
 }
 
 .hover-bg-light-green:hover,
 .hover-bg-light-green:active {
-  background-color: $color_light_green;
+  background-color: $color-light-green;
 }
 
 .hover-bg-dark-green:hover,
 .hover-bg-dark-green:active {
-  background-color: $color_dark_green;
+  background-color: $color-dark-green;
 }
 
 .hover-bg-blue:hover,
 .hover-bg-blue:active {
-  background-color: $color_blue;
+  background-color: $color-blue;
 }
 
 .hover-bg-light-blue:hover,
 .hover-bg-light-blue:active {
-  background-color: $color_light_blue;
+  background-color: $color-light-blue;
 }
 
 .hover-bg-dark-blue:hover,
 .hover-bg-dark-blue:active {
-  background-color: $color_dark_blue;
+  background-color: $color-dark-blue;
 }
 
 .hover-bg-red:hover,
 .hover-bg-red:active {
-  background-color: $color_red;
+  background-color: $color-red;
 }
 
 .hover-bg-light-red:hover,
 .hover-bg-light-red:active {
-  background-color: $color_light_red;
+  background-color: $color-light-red;
 }
 
 .hover-bg-dark-red:hover,
 .hover-bg-dark-red:active {
-  background-color: $color_dark_red;
+  background-color: $color-dark-red;
 }
 
 .hover-bg-yellow:hover,
 .hover-bg-yellow:active {
-  background-color: $color_yellow;
+  background-color: $color-yellow;
 }
 
 .hover-bg-light-yellow:hover,
 .hover-bg-light-yellow:active {
-  background-color: $color_light_yellow;
+  background-color: $color-light-yellow;
 }
 
 .hover-bg-dark-yellow:hover,
 .hover-bg-dark-yellow:active {
-  background-color: $color_dark_yellow;
+  background-color: $color-dark-yellow;
 }
diff --git a/packages/utilities-class/src/utilities/_color.scss b/packages/utilities-class/src/utilities/_color.scss

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-$font: "Roboto", sans-serif;`
	`1`	`+$font-family: "Roboto", sans-serif;`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-$container_width: 70vw;`
	`1`	`+$container-width: 70vw;`
Original file line number	Diff line number	Diff line change
`@@ -1,16 +1,16 @@`
`1`	`1`	`form {`
`2`		`- font-family: $font;`
	`2`	`+ font-family: $font-family;`
`3`	`3`
`4`	`4`	`& .input {`
`5`	`5`	`padding: 10px 15px;`
`6`	`6`	`border-radius: 3px;`
`7`		`- border: 1px solid $color_light;`
	`7`	`+ border: 1px solid $color-light;`
`8`	`8`	`width: 100%;`
`9`	`9`	`margin-bottom: 20px;`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`&:focus {`
`13`		`- border: 1px solid $color_green;`
	`13`	`+ border: 1px solid $color-green;`
`14`	`14`	`outline: none;`
`15`	`15`	`}`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`& a {`
`14`		`- color: $color_light;`
	`14`	`+ color: $color-light;`
`15`	`15`	`text-decoration: none;`
`16`	`16`	`display: flex;`
`17`	`17`	`align-items: center;`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`.container {`
`2`	`2`	`max-width: 90%;`
`3`		`- width: $container_width;`
	`3`	`+ width: $container-width;`
`4`	`4`	`margin: 20px auto;`
`5`	`5`	`overflow: hidden;`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,127 +1,127 @@`
`1`	`1`	`// Background Colors`
`2`	`2`	`.bg-light {`
`3`		`- background-color: $color_light;`
	`3`	`+ background-color: $color-light;`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.bg-dark {`
`7`		`- background-color: $color_dark;`
	`7`	`+ background-color: $color-dark;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.bg-green {`
`11`		`- background-color: $color_green;`
	`11`	`+ background-color: $color-green;`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.bg-light-green {`
`15`		`- background-color: $color_light_green;`
	`15`	`+ background-color: $color-light-green;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.bg-dark-green {`
`19`		`- background-color: $color_dark_green;`
	`19`	`+ background-color: $color-dark-green;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.bg-blue {`
`23`		`- background-color: $color_blue;`
	`23`	`+ background-color: $color-blue;`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.bg-light-blue {`
`27`		`- background-color: $color_light_blue;`
	`27`	`+ background-color: $color-light-blue;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.bg-dark-blue {`
`31`		`- background-color: $color_dark_blue;`
	`31`	`+ background-color: $color-dark-blue;`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.bg-red {`
`35`		`- background-color: $color_red;`
	`35`	`+ background-color: $color-red;`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.bg-light-red {`
`39`		`- background-color: $color_light_red;`
	`39`	`+ background-color: $color-light-red;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.bg-dark-red {`
`43`		`- background-color: $color_dark_red;`
	`43`	`+ background-color: $color-dark-red;`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`.bg-yellow {`
`47`		`- background-color: $color_yellow;`
	`47`	`+ background-color: $color-yellow;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.bg-light-yellow {`
`51`		`- background-color: $color_light_yellow;`
	`51`	`+ background-color: $color-light-yellow;`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.bg-dark-yellow {`
`55`		`- background-color: $color_dark_yellow;`
	`55`	`+ background-color: $color-dark-yellow;`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`// Hover and active colors`
`59`	`59`	`.hover-bg-light:hover,`
`60`	`60`	`.hover-bg-light:active {`
`61`		`- background-color: $color_light;`
	`61`	`+ background-color: $color-light;`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`.hover-bg-dark:hover,`
`65`	`65`	`.hover-bg-dark:active {`
`66`		`- background-color: $color_dark;`
	`66`	`+ background-color: $color-dark;`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`.hover-bg-green:hover,`
`70`	`70`	`.hover-bg-green:active {`
`71`		`- background-color: $color_green;`
	`71`	`+ background-color: $color-green;`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`.hover-bg-light-green:hover,`
`75`	`75`	`.hover-bg-light-green:active {`
`76`		`- background-color: $color_light_green;`
	`76`	`+ background-color: $color-light-green;`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`.hover-bg-dark-green:hover,`
`80`	`80`	`.hover-bg-dark-green:active {`
`81`		`- background-color: $color_dark_green;`
	`81`	`+ background-color: $color-dark-green;`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`.hover-bg-blue:hover,`
`85`	`85`	`.hover-bg-blue:active {`
`86`		`- background-color: $color_blue;`
	`86`	`+ background-color: $color-blue;`
`87`	`87`	`}`
`88`	`88`
`89`	`89`	`.hover-bg-light-blue:hover,`
`90`	`90`	`.hover-bg-light-blue:active {`
`91`		`- background-color: $color_light_blue;`
	`91`	`+ background-color: $color-light-blue;`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`.hover-bg-dark-blue:hover,`
`95`	`95`	`.hover-bg-dark-blue:active {`
`96`		`- background-color: $color_dark_blue;`
	`96`	`+ background-color: $color-dark-blue;`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`.hover-bg-red:hover,`
`100`	`100`	`.hover-bg-red:active {`
`101`		`- background-color: $color_red;`
	`101`	`+ background-color: $color-red;`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`.hover-bg-light-red:hover,`
`105`	`105`	`.hover-bg-light-red:active {`
`106`		`- background-color: $color_light_red;`
	`106`	`+ background-color: $color-light-red;`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`.hover-bg-dark-red:hover,`
`110`	`110`	`.hover-bg-dark-red:active {`
`111`		`- background-color: $color_dark_red;`
	`111`	`+ background-color: $color-dark-red;`
`112`	`112`	`}`
`113`	`113`
`114`	`114`	`.hover-bg-yellow:hover,`
`115`	`115`	`.hover-bg-yellow:active {`
`116`		`- background-color: $color_yellow;`
	`116`	`+ background-color: $color-yellow;`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`.hover-bg-light-yellow:hover,`
`120`	`120`	`.hover-bg-light-yellow:active {`
`121`		`- background-color: $color_light_yellow;`
	`121`	`+ background-color: $color-light-yellow;`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`.hover-bg-dark-yellow:hover,`
`125`	`125`	`.hover-bg-dark-yellow:active {`
`126`		`- background-color: $color_dark_yellow;`
	`126`	`+ background-color: $color-dark-yellow;`
`127`	`127`	`}`