@muraldevkit/ds-foundation 2.16.2-dev-JVec.1 → 2.18.0

package/src/styles/global-variables/motion.scss

@@ -4,37 +4,62 @@
 /// @group variables
 ////
 
-$mrl-global-motion-timing-vars: (
-	"m1": "0.17, 0.00, 0.00, 1.00",
-	"m1r": "1.00, 0.00, 0.83, 1.00",
-	"m2": "0, 0.5, 0, 1",
-	"m3": "0.33, 0.00, 0.67, 1.00",
-	"m4": "0.00, 0.00, 0.00, 1.00"
-);
-$mrl-global-motion-duration-vars: (
-	"01": "17",
-	"02": "167",
-	"03": "333",
-	"04": "667"
-);
-$mrl-global-motion-distance-vars: (
-	"01": "4",
-	"02": "8"
-);
-
 :root {
 	/* Motion - Timing */
-	@each $token-name, $token-value in $mrl-global-motion-timing-vars {
-		--mrl-timing-#{$token-name}: cubic-bezier(#{$token-value});
-	}
+	///
+	/// Motion timing token.
+	///
+	--mrl-timing-m1: cubic-bezier(0.17, 0, 0, 1);
+
+	///
+	/// Motion timing token.
+	///
+	--mrl-timing-m1r: cubic-bezier(1, 0, 0.83, 1);
+
+	///
+	/// Motion timing token.
+	///
+	--mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);
+
+	///
+	/// Motion timing token.
+	///
+	--mrl-timing-m3: cubic-bezier(0.33, 0, 0.67, 1);
+
+	///
+	/// Motion timing token.
+	///
+	--mrl-timing-m4: cubic-bezier(0, 0, 0, 1);
 
 	/* Motion - Duration */
-	@each $token-name, $token-value in $mrl-global-motion-duration-vars {
-		--mrl-duration-#{$token-name}: #{$token-value}ms;
-	}
+	///
+	/// Motion duration token.
+	///
+	--mrl-duration-01: 17ms;
+
+	///
+	/// Motion duration token.
+	///
+	--mrl-duration-02: 167ms;
+
+	///
+	/// Motion duration token.
+	///
+	--mrl-duration-03: 333ms;
+
+	///
+	/// Motion duration token.
+	///
+	--mrl-duration-04: 667ms;
 
 	/* Motion - Distance */
-	@each $token-name, $token-value in $mrl-global-motion-distance-vars {
-		--mrl-distance-#{$token-name}: #{$token-value}px;
-	}
+	///
+	/// Motion distance token.
+	///
+	--mrl-distance-01: 4px;
+
+	///
+	/// Motion distance token.
+	///
+	--mrl-distance-02: 8px;
 }

package/src/styles/global-variables/shadows.scss

@@ -11,16 +11,29 @@
 */
 
 /* Shadow/Elevation Tokens */
-$mrl-global-shadow-vars: (
-	/* Base */ '01': '0 0 1px 0 rgba(11, 41, 70, 0.32),0 4px 4px 0 rgba(42, 82, 121, 0.04)',
-	'02': '0 0 1px 0 rgba(11, 41, 70, 0.32),0 6px 8px 0 rgba(42, 82, 121, 0.04)',
-	'03': '0 0 1px 0 rgba(11, 41, 70, 0.32),0 24px 20px 0 rgba(42, 82, 121, 0.08)',
-	/* Interactive */ 'interactive-01': '0 4px 5px 0 rgba(24, 36, 47, 0.08)',
-	'interactive-02': '0 12px 20px 0px rgba(27, 57, 75, 0.20)'
-);
-
 :root {
-	@each $token-name, $token-value in $mrl-global-shadow-vars {
-		--mrl-shadow-#{$token-name}: #{$token-value};
-	}
+	///
+	/// Shadow token.
+	///
+	--mrl-shadow-01: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04);
+
+	///
+	/// Shadow token.
+	///
+	--mrl-shadow-02: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04);
+
+	///
+	/// Shadow token.
+	///
+	--mrl-shadow-03: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08);
+
+	///
+	/// Shadow token.
+	///
+	--mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08);
+
+	///
+	/// Shadow token.
+	///
+	--mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.2);
 }

package/src/styles/global-variables/spacing.scss

@@ -5,28 +5,75 @@
 ////
 
 /* Spacing Tokens */
-// Values in the map is the number of pixels provided by design.
-// We use a calculation to convert the pixel values to rems for accessibility support.
-$mrl-global-spacing-vars: (
-	"01": 2,
-	"02": 4,
-	"03": 8,
-	"04": 12,
-	"05": 16,
-	"06": 20,
-	"07": 24,
-	"08": 32,
-	"09": 40,
-	"10": 48,
-	"11": 64,
-	"12": 80,
-	"13": 96,
-	"14": 160,
-);
 
 :root {
-	@each $token-name, $token-value in $mrl-global-spacing-vars {
-		--mrl-spacing-#{$token-name}: calc(#{$token-value} / var(--mrl-baseline) * 1rem);
-	}
-}
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);
 
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Spacing token.
+	///
+	--mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem);
+}

package/src/styles/global-variables/typography.scss

@@ -5,60 +5,12 @@
 ////
 
 /* Font Size Tokens */
-// Values in the map are the number of pixels provided by design.
-// We use a calculation to convert the pixel values to rems for accessibility support.
-$mrl-global-font-size-vars: (
-	"01": 11,
-	"02": 12,
-	"03": 14,
-	"04": 16,
-	"05": 18,
-	"06": 20,
-	"07": 24,
-	"08": 32,
-	"09": 40,
-	"10": 48,
-	"11": 64,
-	"12": 80,
-	"13": 96,
-	"14": 120
-);
-
 
 /* Line-height Tokens */
-$mrl-global-line-height-vars: (
-	"01": 0.875,
-	"02": 1,
-	"03": 1.125,
-	"04": 1.167,
-	"05": 1.25,
-	"06": 1.333,
-	"07": 1.4,
-	"08": 1.429,
-	"09": 1.5,
-	"10": 1.56,
-	"11": 1.75,
-	"12": 2
-);
 
 /* Letter Spacing Tokens */
-$mrl-global-letter-spacing-vars: (
-	"01": -2%,
-	"02": -1%,
-	"03": 0%,
-	"04": 1%,
-	"05": 2%
-);
-
 
 /* Font Weight Tokens */
-$mrl-global-font-weight-vars: (
-	"01": 400,
-	"02": 500,
-	"03": 600,
-	"04": 700,
-	"05": 800,
-);
 
 :root {
 	--mrl-baseline: 16;
@@ -66,22 +18,186 @@ $mrl-global-font-weight-vars: (
 	--mrl-font-family-02: stkbureau;
 
 	/* Typography - Font Size */
-	@each $token-name, $token-value in $mrl-global-font-size-vars {
-		--mrl-font-size-#{$token-name}: calc(#{$token-value} / var(--mrl-baseline) * 1rem);
-	}
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);
+
+	///
+	/// Font size token.
+	///
+	--mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);
 
 	/* Typography - Line Height */
-	@each $token-name, $token-value in $mrl-global-line-height-vars {
-		--mrl-line-height-#{$token-name}: #{$token-value};
-	}
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-01: 0.875;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-02: 1;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-03: 1.125;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-04: 1.167;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-05: 1.25;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-06: 1.333;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-07: 1.4;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-08: 1.429;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-09: 1.5;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-10: 1.56;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-11: 1.75;
+
+	///
+	/// Line height token.
+	///
+	--mrl-line-height-12: 2;
 
 	/* Typography - Letter Spacing */
-	@each $token-name, $token-value in $mrl-global-letter-spacing-vars {
-		--mrl-letter-spacing-#{$token-name}: #{$token-value} ;
-	}
+	///
+	/// Letter spacing token.
+	///
+	--mrl-letter-spacing-01: -2%;
+
+	///
+	/// Letter spacing token.
+	///
+	--mrl-letter-spacing-02: -1%;
+
+	///
+	/// Letter spacing token.
+	///
+	--mrl-letter-spacing-03: 0%;
+
+	///
+	/// Letter spacing token.
+	///
+	--mrl-letter-spacing-04: 1%;
+
+	///
+	/// Letter spacing token.
+	///
+	--mrl-letter-spacing-05: 2%;
 
 	/* Typography - Font Weight */
-	@each $token-name, $token-value in $mrl-global-font-weight-vars {
-		--mrl-font-weight-#{$token-name}: #{$token-value} ;
-	}
+	///
+	/// Font weight token.
+	///
+	--mrl-font-weight-01: 400;
+
+	///
+	/// Font weight token.
+	///
+	--mrl-font-weight-02: 500;
+
+	///
+	/// Font weight token.
+	///
+	--mrl-font-weight-03: 600;
+
+	///
+	/// Font weight token.
+	///
+	--mrl-font-weight-04: 700;
+
+	///
+	/// Font weight token.
+	///
+	--mrl-font-weight-05: 800;
 }