Merge pull request #987 from Sysvale/feature/elevation-and-spacing-token-classes

Feature/elevation and spacing token classes

Author: RafaelGondi

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.133.1",
+	"version": "3.134.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/assets/sass/legacy-tokens/elevation.scss

@@ -22,3 +22,12 @@ $z-index: map-merge(
 	),
 	$z-index
 );
+
+.z-index-sunk { $z-index-sunk: -1000; }
+.z-index-base { $z-index-base: 0; }
+.z-index-backdrop { $z-index-backdrop: 1000; }
+.z-index-toolbar { $z-index-toolbar: 2000; }
+.z-index-sidesheet { $z-index-sidesheet: 2500; }
+.z-index-modal { $z-index-modal: 3000; }
+.z-index-tooltip { $z-index-tooltip: 4000; }
+.z-index-toast { $z-index-toast: 5000; }

src/assets/sass/legacy-tokens/spacing.scss

@@ -1,3 +1,4 @@
+$token-values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
 $spacers: 0, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3;
 $rem: 16px;
 
@@ -123,4 +124,47 @@ $rem: 16px;
 
 @function mYX($n1, $n2) {
 	@return getSpacerValue($n1) getSpacerValue($n2);
+}
+
+@each $value in $token-values {
+	.mt-#{$value} {
+		margin-top: $value * 4px;
+	}
+
+	.mr-#{$value} {
+		margin-right: $value * 4px;
+	}
+
+	.mb-#{$value} {
+		margin-bottom: $value * 4px;
+	}
+
+	.ml-#{$value} {
+		margin-left: $value * 4px;
+	}
+
+	.ma-#{$value} {
+		margin: $value * 4px;
+	}
+
+
+	.pt-#{$value} {
+		padding-top: $value * 4px;
+	}
+
+	.pr-#{$value} {
+		padding-right: $value * 4px;
+	}
+
+	.pb-#{$value} {
+		padding-bottom: $value * 4px;
+	}
+
+	.pl-#{$value} {
+		padding-left: $value * 4px;
+	}
+
+	.pa-#{$value} {
+		padding: $value * 4px;
+	}
 }

src/assets/sass/tokens/_elevation.scss

@@ -24,3 +24,12 @@ $z-index: map.merge(
 	),
 	$z-index
 );
+
+.z-index-sunk { $z-index-sunk: -1000; }
+.z-index-base { $z-index-base: 0; }
+.z-index-backdrop { $z-index-backdrop: 1000; }
+.z-index-toolbar { $z-index-toolbar: 2000; }
+.z-index-sidesheet { $z-index-sidesheet: 2500; }
+.z-index-modal { $z-index-modal: 3000; }
+.z-index-tooltip { $z-index-tooltip: 4000; }
+.z-index-toast { $z-index-toast: 5000; }

src/assets/sass/tokens/_spacing.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+$token-values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
 $spacers: 0, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3;
 $rem: 16px;
 
@@ -125,4 +126,47 @@ $rem: 16px;
 
 @function mYX($n1, $n2) {
 	@return getSpacerValue($n1) getSpacerValue($n2);
+}
+
+@each $value in $token-values {
+	.mt-#{$value} {
+		margin-top: $value * 4px;
+	}
+
+	.mr-#{$value} {
+		margin-right: $value * 4px;
+	}
+
+	.mb-#{$value} {
+		margin-bottom: $value * 4px;
+	}
+
+	.ml-#{$value} {
+		margin-left: $value * 4px;
+	}
+
+	.ma-#{$value} {
+		margin: $value * 4px;
+	}
+
+
+	.pt-#{$value} {
+		padding-top: $value * 4px;
+	}
+
+	.pr-#{$value} {
+		padding-right: $value * 4px;
+	}
+
+	.pb-#{$value} {
+		padding-bottom: $value * 4px;
+	}
+
+	.pl-#{$value} {
+		padding-left: $value * 4px;
+	}
+
+	.pa-#{$value} {
+		padding: $value * 4px;
+	}
 }