@undrr/undrr-mangrove 1.8.2 → 2.0.0-alpha.2

package/scss/assets/scss/_utility.scss

@@ -30,10 +30,10 @@
 
 // color map solid
 $colors-solid: (
-  "yellow": $mg-color-yellow,
-  "red": $mg-color-red-900,
-  "green": $mg-color-green,
-  "blue": $mg-color-azure,
+  "yellow": var(--mg-color-yellow),
+  "red": rgb(var(--mg-color-red-900)),
+  "green": var(--mg-color-green),
+  "blue": var(--mg-color-azure),
 );
 
 @each $name, $color in $colors-solid {
@@ -89,143 +89,143 @@ $colors-solid: (
 /* Color utilities start */
 
 // Background color utilities
-.mg-u-background-color--white { background-color: $mg-color-white; }
-.mg-u-background-color--black { background-color: $mg-color-black; }
+.mg-u-background-color--white { background-color: rgb(var(--mg-color-white)); }
+.mg-u-background-color--black { background-color: rgb(var(--mg-color-black)); }
 
 // Blue shades
-.mg-u-background-color--blue-50 { background-color: $mg-color-blue-50; }
-.mg-u-background-color--blue-100 { background-color: $mg-color-blue-100; }
-.mg-u-background-color--blue-200 { background-color: $mg-color-blue-200; }
-.mg-u-background-color--blue-300 { background-color: $mg-color-blue-300; }
-.mg-u-background-color--blue-400 { background-color: $mg-color-blue-400; }
-.mg-u-background-color--blue-500 { background-color: $mg-color-blue-500; }
-.mg-u-background-color--blue-600 { background-color: $mg-color-blue-600; }
-.mg-u-background-color--blue-700 { background-color: $mg-color-blue-700; }
-.mg-u-background-color--blue-800 { background-color: $mg-color-blue-800; }
-.mg-u-background-color--blue-900 { background-color: $mg-color-blue-900; }
+.mg-u-background-color--blue-50 { background-color: rgb(var(--mg-color-blue-50)); }
+.mg-u-background-color--blue-100 { background-color: rgb(var(--mg-color-blue-100)); }
+.mg-u-background-color--blue-200 { background-color: rgb(var(--mg-color-blue-200)); }
+.mg-u-background-color--blue-300 { background-color: rgb(var(--mg-color-blue-300)); }
+.mg-u-background-color--blue-400 { background-color: rgb(var(--mg-color-blue-400)); }
+.mg-u-background-color--blue-500 { background-color: rgb(var(--mg-color-blue-500)); }
+.mg-u-background-color--blue-600 { background-color: rgb(var(--mg-color-blue-600)); }
+.mg-u-background-color--blue-700 { background-color: rgb(var(--mg-color-blue-700)); }
+.mg-u-background-color--blue-800 { background-color: rgb(var(--mg-color-blue-800)); }
+.mg-u-background-color--blue-900 { background-color: rgb(var(--mg-color-blue-900)); }
 
 // Orange shades
-.mg-u-background-color--orange-50 { background-color: $mg-color-orange-50; }
-.mg-u-background-color--orange-100 { background-color: $mg-color-orange-100; }
-.mg-u-background-color--orange-200 { background-color: $mg-color-orange-200; }
-.mg-u-background-color--orange-300 { background-color: $mg-color-orange-300; }
-.mg-u-background-color--orange-400 { background-color: $mg-color-orange-400; }
-.mg-u-background-color--orange-500 { background-color: $mg-color-orange-500; }
-.mg-u-background-color--orange-600 { background-color: $mg-color-orange-600; }
-.mg-u-background-color--orange-700 { background-color: $mg-color-orange-700; }
-.mg-u-background-color--orange-800 { background-color: $mg-color-orange-800; }
-.mg-u-background-color--orange-900 { background-color: $mg-color-orange-900; }
+.mg-u-background-color--orange-50 { background-color: rgb(var(--mg-color-orange-50)); }
+.mg-u-background-color--orange-100 { background-color: rgb(var(--mg-color-orange-100)); }
+.mg-u-background-color--orange-200 { background-color: rgb(var(--mg-color-orange-200)); }
+.mg-u-background-color--orange-300 { background-color: rgb(var(--mg-color-orange-300)); }
+.mg-u-background-color--orange-400 { background-color: rgb(var(--mg-color-orange-400)); }
+.mg-u-background-color--orange-500 { background-color: rgb(var(--mg-color-orange-500)); }
+.mg-u-background-color--orange-600 { background-color: rgb(var(--mg-color-orange-600)); }
+.mg-u-background-color--orange-700 { background-color: rgb(var(--mg-color-orange-700)); }
+.mg-u-background-color--orange-800 { background-color: rgb(var(--mg-color-orange-800)); }
+.mg-u-background-color--orange-900 { background-color: rgb(var(--mg-color-orange-900)); }
 
 // Red shades
-.mg-u-background-color--red-50 { background-color: $mg-color-red-50; }
-.mg-u-background-color--red-100 { background-color: $mg-color-red-100; }
-.mg-u-background-color--red-200 { background-color: $mg-color-red-200; }
-.mg-u-background-color--red-300 { background-color: $mg-color-red-300; }
-.mg-u-background-color--red-400 { background-color: $mg-color-red-400; }
-.mg-u-background-color--red-500 { background-color: $mg-color-red-500; }
-.mg-u-background-color--red-600 { background-color: $mg-color-red-600; }
-.mg-u-background-color--red-700 { background-color: $mg-color-red-700; }
-.mg-u-background-color--red-800 { background-color: $mg-color-red-800; }
-.mg-u-background-color--red-900 { background-color: $mg-color-red-900; }
+.mg-u-background-color--red-50 { background-color: rgb(var(--mg-color-red-50)); }
+.mg-u-background-color--red-100 { background-color: rgb(var(--mg-color-red-100)); }
+.mg-u-background-color--red-200 { background-color: rgb(var(--mg-color-red-200)); }
+.mg-u-background-color--red-300 { background-color: rgb(var(--mg-color-red-300)); }
+.mg-u-background-color--red-400 { background-color: rgb(var(--mg-color-red-400)); }
+.mg-u-background-color--red-500 { background-color: rgb(var(--mg-color-red-500)); }
+.mg-u-background-color--red-600 { background-color: rgb(var(--mg-color-red-600)); }
+.mg-u-background-color--red-700 { background-color: rgb(var(--mg-color-red-700)); }
+.mg-u-background-color--red-800 { background-color: rgb(var(--mg-color-red-800)); }
+.mg-u-background-color--red-900 { background-color: rgb(var(--mg-color-red-900)); }
 
 // Neutral shades
-.mg-u-background-color--neutral-0 { background-color: $mg-color-neutral-0; }
-.mg-u-background-color--neutral-25 { background-color: $mg-color-neutral-25; }
-.mg-u-background-color--neutral-50 { background-color: $mg-color-neutral-50; }
-.mg-u-background-color--neutral-100 { background-color: $mg-color-neutral-100; }
-.mg-u-background-color--neutral-200 { background-color: $mg-color-neutral-200; }
-.mg-u-background-color--neutral-300 { background-color: $mg-color-neutral-300; }
-.mg-u-background-color--neutral-400 { background-color: $mg-color-neutral-400; }
-.mg-u-background-color--neutral-500 { background-color: $mg-color-neutral-500; }
-.mg-u-background-color--neutral-600 { background-color: $mg-color-neutral-600; }
-.mg-u-background-color--neutral-700 { background-color: $mg-color-neutral-700; }
-.mg-u-background-color--neutral-800 { background-color: $mg-color-neutral-800; }
-.mg-u-background-color--neutral-900 { background-color: $mg-color-neutral-900; }
+.mg-u-background-color--neutral-0 { background-color: rgb(var(--mg-color-neutral-0)); }
+.mg-u-background-color--neutral-25 { background-color: rgb(var(--mg-color-neutral-25)); }
+.mg-u-background-color--neutral-50 { background-color: rgb(var(--mg-color-neutral-50)); }
+.mg-u-background-color--neutral-100 { background-color: rgb(var(--mg-color-neutral-100)); }
+.mg-u-background-color--neutral-200 { background-color: rgb(var(--mg-color-neutral-200)); }
+.mg-u-background-color--neutral-300 { background-color: rgb(var(--mg-color-neutral-300)); }
+.mg-u-background-color--neutral-400 { background-color: rgb(var(--mg-color-neutral-400)); }
+.mg-u-background-color--neutral-500 { background-color: rgb(var(--mg-color-neutral-500)); }
+.mg-u-background-color--neutral-600 { background-color: rgb(var(--mg-color-neutral-600)); }
+.mg-u-background-color--neutral-700 { background-color: rgb(var(--mg-color-neutral-700)); }
+.mg-u-background-color--neutral-800 { background-color: rgb(var(--mg-color-neutral-800)); }
+.mg-u-background-color--neutral-900 { background-color: rgb(var(--mg-color-neutral-900)); }
 
 // Accent colors
-.mg-u-background-color--accent-100 { background-color: $mg-color-accent-100; }
-.mg-u-background-color--accent-200 { background-color: $mg-color-accent-200; }
-.mg-u-background-color--accent-300 { background-color: $mg-color-accent-300; }
-.mg-u-background-color--accent-400 { background-color: $mg-color-accent-400; }
+.mg-u-background-color--accent-100 { background-color: rgb(var(--mg-color-accent-100)); }
+.mg-u-background-color--accent-200 { background-color: rgb(var(--mg-color-accent-200)); }
+.mg-u-background-color--accent-300 { background-color: rgb(var(--mg-color-accent-300)); }
+.mg-u-background-color--accent-400 { background-color: rgb(var(--mg-color-accent-400)); }
 
 // Sendai colors
-.mg-u-background-color--sendai-red { background-color: $sendai-red; }
-.mg-u-background-color--sendai-orange { background-color: $sendai-orange; }
-.mg-u-background-color--sendai-purple { background-color: $sendai-purple; }
-.mg-u-background-color--sendai-turquoise { background-color: $sendai-turquoise; }
+.mg-u-background-color--sendai-red { background-color: var(--sendai-red); }
+.mg-u-background-color--sendai-orange { background-color: var(--sendai-orange); }
+.mg-u-background-color--sendai-purple { background-color: var(--sendai-purple); }
+.mg-u-background-color--sendai-turquoise { background-color: var(--sendai-turquoise); }
 
 // Interactive colors
-.mg-u-background-color--interactive { background-color: $mg-color-interactive; }
-.mg-u-background-color--interactive-active { background-color: $mg-color-interactive-active; }
+.mg-u-background-color--interactive { background-color: rgb(var(--mg-color-interactive)); }
+.mg-u-background-color--interactive-active { background-color: rgb(var(--mg-color-interactive-active)); }
 
 // Text color utilities
-.mg-u-color--white { color: $mg-color-white; }
-.mg-u-color--black { color: $mg-color-black; }
+.mg-u-color--white { color: rgb(var(--mg-color-white)); }
+.mg-u-color--black { color: rgb(var(--mg-color-black)); }
 
 // Blue shades
-.mg-u-color--blue-50 { color: $mg-color-blue-50; }
-.mg-u-color--blue-100 { color: $mg-color-blue-100; }
-.mg-u-color--blue-200 { color: $mg-color-blue-200; }
-.mg-u-color--blue-300 { color: $mg-color-blue-300; }
-.mg-u-color--blue-400 { color: $mg-color-blue-400; }
-.mg-u-color--blue-500 { color: $mg-color-blue-500; }
-.mg-u-color--blue-600 { color: $mg-color-blue-600; }
-.mg-u-color--blue-700 { color: $mg-color-blue-700; }
-.mg-u-color--blue-800 { color: $mg-color-blue-800; }
-.mg-u-color--blue-900 { color: $mg-color-blue-900; }
+.mg-u-color--blue-50 { color: rgb(var(--mg-color-blue-50)); }
+.mg-u-color--blue-100 { color: rgb(var(--mg-color-blue-100)); }
+.mg-u-color--blue-200 { color: rgb(var(--mg-color-blue-200)); }
+.mg-u-color--blue-300 { color: rgb(var(--mg-color-blue-300)); }
+.mg-u-color--blue-400 { color: rgb(var(--mg-color-blue-400)); }
+.mg-u-color--blue-500 { color: rgb(var(--mg-color-blue-500)); }
+.mg-u-color--blue-600 { color: rgb(var(--mg-color-blue-600)); }
+.mg-u-color--blue-700 { color: rgb(var(--mg-color-blue-700)); }
+.mg-u-color--blue-800 { color: rgb(var(--mg-color-blue-800)); }
+.mg-u-color--blue-900 { color: rgb(var(--mg-color-blue-900)); }
 
 // Orange shades
-.mg-u-color--orange-50 { color: $mg-color-orange-50; }
-.mg-u-color--orange-100 { color: $mg-color-orange-100; }
-.mg-u-color--orange-200 { color: $mg-color-orange-200; }
-.mg-u-color--orange-300 { color: $mg-color-orange-300; }
-.mg-u-color--orange-400 { color: $mg-color-orange-400; }
-.mg-u-color--orange-500 { color: $mg-color-orange-500; }
-.mg-u-color--orange-600 { color: $mg-color-orange-600; }
-.mg-u-color--orange-700 { color: $mg-color-orange-700; }
-.mg-u-color--orange-800 { color: $mg-color-orange-800; }
-.mg-u-color--orange-900 { color: $mg-color-orange-900; }
+.mg-u-color--orange-50 { color: rgb(var(--mg-color-orange-50)); }
+.mg-u-color--orange-100 { color: rgb(var(--mg-color-orange-100)); }
+.mg-u-color--orange-200 { color: rgb(var(--mg-color-orange-200)); }
+.mg-u-color--orange-300 { color: rgb(var(--mg-color-orange-300)); }
+.mg-u-color--orange-400 { color: rgb(var(--mg-color-orange-400)); }
+.mg-u-color--orange-500 { color: rgb(var(--mg-color-orange-500)); }
+.mg-u-color--orange-600 { color: rgb(var(--mg-color-orange-600)); }
+.mg-u-color--orange-700 { color: rgb(var(--mg-color-orange-700)); }
+.mg-u-color--orange-800 { color: rgb(var(--mg-color-orange-800)); }
+.mg-u-color--orange-900 { color: rgb(var(--mg-color-orange-900)); }
 
 // Red shades
-.mg-u-color--red-50 { color: $mg-color-red-50; }
-.mg-u-color--red-100 { color: $mg-color-red-100; }
-.mg-u-color--red-200 { color: $mg-color-red-200; }
-.mg-u-color--red-300 { color: $mg-color-red-300; }
-.mg-u-color--red-400 { color: $mg-color-red-400; }
-.mg-u-color--red-500 { color: $mg-color-red-500; }
-.mg-u-color--red-600 { color: $mg-color-red-600; }
-.mg-u-color--red-700 { color: $mg-color-red-700; }
-.mg-u-color--red-800 { color: $mg-color-red-800; }
-.mg-u-color--red-900 { color: $mg-color-red-900; }
+.mg-u-color--red-50 { color: rgb(var(--mg-color-red-50)); }
+.mg-u-color--red-100 { color: rgb(var(--mg-color-red-100)); }
+.mg-u-color--red-200 { color: rgb(var(--mg-color-red-200)); }
+.mg-u-color--red-300 { color: rgb(var(--mg-color-red-300)); }
+.mg-u-color--red-400 { color: rgb(var(--mg-color-red-400)); }
+.mg-u-color--red-500 { color: rgb(var(--mg-color-red-500)); }
+.mg-u-color--red-600 { color: rgb(var(--mg-color-red-600)); }
+.mg-u-color--red-700 { color: rgb(var(--mg-color-red-700)); }
+.mg-u-color--red-800 { color: rgb(var(--mg-color-red-800)); }
+.mg-u-color--red-900 { color: rgb(var(--mg-color-red-900)); }
 
 // Neutral shades
-.mg-u-color--neutral-0 { color: $mg-color-neutral-0; }
-.mg-u-color--neutral-50 { color: $mg-color-neutral-50; }
-.mg-u-color--neutral-100 { color: $mg-color-neutral-100; }
-.mg-u-color--neutral-200 { color: $mg-color-neutral-200; }
-.mg-u-color--neutral-300 { color: $mg-color-neutral-300; }
-.mg-u-color--neutral-400 { color: $mg-color-neutral-400; }
-.mg-u-color--neutral-500 { color: $mg-color-neutral-500; }
-.mg-u-color--neutral-600 { color: $mg-color-neutral-600; }
-.mg-u-color--neutral-700 { color: $mg-color-neutral-700; }
-.mg-u-color--neutral-800 { color: $mg-color-neutral-800; }
-.mg-u-color--neutral-900 { color: $mg-color-neutral-900; }
+.mg-u-color--neutral-0 { color: rgb(var(--mg-color-neutral-0)); }
+.mg-u-color--neutral-50 { color: rgb(var(--mg-color-neutral-50)); }
+.mg-u-color--neutral-100 { color: rgb(var(--mg-color-neutral-100)); }
+.mg-u-color--neutral-200 { color: rgb(var(--mg-color-neutral-200)); }
+.mg-u-color--neutral-300 { color: rgb(var(--mg-color-neutral-300)); }
+.mg-u-color--neutral-400 { color: rgb(var(--mg-color-neutral-400)); }
+.mg-u-color--neutral-500 { color: rgb(var(--mg-color-neutral-500)); }
+.mg-u-color--neutral-600 { color: rgb(var(--mg-color-neutral-600)); }
+.mg-u-color--neutral-700 { color: rgb(var(--mg-color-neutral-700)); }
+.mg-u-color--neutral-800 { color: rgb(var(--mg-color-neutral-800)); }
+.mg-u-color--neutral-900 { color: rgb(var(--mg-color-neutral-900)); }
 
 // Accent colors
-.mg-u-color--accent-100 { color: $mg-color-accent-100; }
-.mg-u-color--accent-200 { color: $mg-color-accent-200; }
-.mg-u-color--accent-300 { color: $mg-color-accent-300; }
-.mg-u-color--accent-400 { color: $mg-color-accent-400; }
+.mg-u-color--accent-100 { color: rgb(var(--mg-color-accent-100)); }
+.mg-u-color--accent-200 { color: rgb(var(--mg-color-accent-200)); }
+.mg-u-color--accent-300 { color: rgb(var(--mg-color-accent-300)); }
+.mg-u-color--accent-400 { color: rgb(var(--mg-color-accent-400)); }
 
 // Sendai colors
-.mg-u-color--sendai-red { color: $sendai-red; }
-.mg-u-color--sendai-orange { color: $sendai-orange; }
-.mg-u-color--sendai-purple { color: $sendai-purple; }
-.mg-u-color--sendai-turquoise { color: $sendai-turquoise; }
+.mg-u-color--sendai-red { color: var(--sendai-red); }
+.mg-u-color--sendai-orange { color: var(--sendai-orange); }
+.mg-u-color--sendai-purple { color: var(--sendai-purple); }
+.mg-u-color--sendai-turquoise { color: var(--sendai-turquoise); }
 
 // Interactive colors
-.mg-u-color--interactive { color: $mg-color-interactive; }
-.mg-u-color--interactive-active { color: $mg-color-interactive-active; }
+.mg-u-color--interactive { color: rgb(var(--mg-color-interactive)); }
+.mg-u-color--interactive-active { color: rgb(var(--mg-color-interactive-active)); }
 
 /* Color utilities end */
 
@@ -235,7 +235,7 @@ $colors-solid: (
 .mg-u-flex { display: flex; }
 .mg-u-flex-wrap { flex-wrap: wrap; }
 .mg-u-align-items-center { align-items: center; }
-.mg-u-gap-100 { gap: $mg-spacing-100; }
+.mg-u-gap-100 { gap: var(--mg-spacing-100); }
 
 // RTL-safe push utilities using CSS logical properties.
 // Push an element toward the inline-end, inline-start, or center