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

package/scss/assets/scss/_theme-irp.scss

@@ -0,0 +1,39 @@
+// IRP theme — runtime CSS custom property overrides.
+// Applied when .mg-theme-irp is present on <body> or a wrapping element.
+$_irp-color-primary--raw: 15 120 191;
+$_irp-color-green--raw: 140 198 63;
+
+.mg-theme-irp {
+  // Runtime marker: lets JS/tooling detect that this brand theme is active
+  // (guards the sub-brand body-class trap). See docs/RELEASE-2.0.md.
+  --mg-theme-loaded: irp;
+  --mg-color-interactive:          #{$_irp-color-primary--raw};
+  --mg-color-interactive-active:   #{$_irp-color-primary--raw};
+  --mg-color-tag:                  var(--mg-color-interactive);
+  --mg-color-tag--hover:           var(--mg-color-interactive-active);
+  --mg-radius-tag:                 var(--mg-spacing-50);
+  --mg-color-button-background:    #{$_irp-color-primary--raw};
+  --mg-color-button-background--hover: var(--mg-color-orange-900);
+  --mg-color-button-outline-primary: #{$_irp-color-primary--raw};
+  --mg-color-button-outline-primary--hover: var(--mg-color-orange-900);
+  --mg-color-button-outline-secondary: var(--mg-color-button-secondary-background);
+  --mg-color-button-outline-secondary--hover: var(--mg-color-button-secondary-background--hover);
+  --mg-radius-button:              var(--mg-spacing-50);
+  --mg-color-form-check:           var(--mg-color-interactive);
+  --mg-color-form-check--hover:    var(--mg-color-interactive-active);
+  --mg-color-form-check--checked:  var(--mg-color-interactive);
+  --mg-color-form-focus:           var(--mg-color-interactive);
+  --mg-radius-form-input:          var(--mg-spacing-50);
+  --mg-color-hero:                 var(--mg-color-interactive);
+  --mg-spacing-hero-overlay:       #{mg-rem(20)} 0;
+  --mg-color-tabbar-background:    rgb(#{$_irp-color-green--raw} / 0.1);
+  --mg-color-text-tab:             var(--mg-color-neutral-500);
+  --mg-color-text-tab-active:      var(--mg-color-neutral-700);
+  --mg-color-tab-background:       rgb(#{$_irp-color-green--raw} / 0.3);
+  --mg-color-tab-background--inactive: var(--mg-color-tabbar-background);
+  --mg-color-tab-background--hover: rgb(#{$_irp-color-green--raw});
+  --mg-radius-tab:                 var(--mg-spacing-0) var(--mg-spacing-0) 0 0;
+  --mg-color-tab-border:           var(--mg-color-neutral-300);
+  --mg-color-tab-border--hover:    rgb(#{$_irp-color-green--raw} / 0.1);
+  --mg-color-tab-border--active:   rgb(#{$_irp-color-green--raw} / 0.1);
+}

package/scss/assets/scss/_theme-mcr.scss

@@ -0,0 +1,56 @@
+// MCR theme — runtime CSS custom property overrides.
+// Applied when .mg-theme-mcr is present on <body> or a wrapping element.
+// As v2.0 migration progresses, sections move from _variables-mcr.scss into here.
+// When _variables-mcr.scss contains only comments, delete it.
+
+// MCR brand palette (local to this file — not emitted as global :root properties)
+$_mcr-purple--raw: 89 26 97;
+$_mcr-purple-800--raw: 110 38 119;
+$_mcr-purple-200--raw: 222 208 215;
+
+.mg-theme-mcr {
+  // Runtime marker: lets JS/tooling detect that this brand theme is active
+  // (guards the sub-brand body-class trap). See docs/RELEASE-2.0.md.
+  --mg-theme-loaded: mcr;
+
+  // Tab overrides (migrated from _variables-mcr.scss)
+  --mg-color-tabbar-background:        none;
+  --mg-color-tab-background:           rgb(#{$_mcr-purple-800--raw});
+  --mg-color-tab-background--inactive: rgb(var(--mg-color-neutral-0));
+  --mg-color-tab-border:               rgb(#{$_mcr-purple-200--raw});
+  --mg-color-tab-border--hover:        rgb(#{$_mcr-purple-800--raw});
+  --mg-color-tab-border--active:       rgb(#{$_mcr-purple-200--raw});
+  --mg-color-tab-background--hover:    rgb(#{$_mcr-purple-800--raw} / 0.6);
+  --mg-radius-tab:                     var(--mg-spacing-150) var(--mg-spacing-150) 0 0;
+  --mg-padding-tab:                    var(--mg-spacing-200) var(--mg-spacing-300);
+  --mg-color-text-tab:                 rgb(var(--mg-color-neutral-700));
+  --mg-color-text-tab--hover:          rgb(var(--mg-color-neutral-0));
+  --mg-color-text-tab-active:          rgb(var(--mg-color-neutral-0));
+  --mg-padding-tab-section:            var(--mg-spacing-500);
+  --mg-radius-tab-section:             var(--mg-spacing-200);
+  --mg-box-shadow-tab-section:         rgb(var(--mg-color-neutral-900) / 0.24) 0 6px 5px 0;
+
+  // Interactive + component overrides (moved from _variables-mcr.scss)
+  --mg-color-interactive:          #{$_mcr-purple--raw};
+  --mg-color-interactive-active:   #{$_mcr-purple--raw};
+  --mg-color-tag:                  var(--mg-color-interactive);
+  --mg-color-tag--hover:           var(--mg-color-interactive-active);
+  --mg-radius-tag:                 var(--mg-spacing-100);
+  --mg-color-button-background:    #{$_mcr-purple--raw};
+  --mg-color-button-background--hover: #{$_mcr-purple-800--raw};
+  --mg-color-button-outline-primary: #{$_mcr-purple--raw};
+  --mg-color-button-outline-primary--hover: #{$_mcr-purple-800--raw};
+  --mg-color-button-outline-secondary: var(--mg-color-button-secondary-background);
+  --mg-color-button-outline-secondary--hover: var(--mg-color-button-secondary-background--hover);
+  --mg-radius-button:              var(--mg-spacing-300);
+  --mg-border-width-button:        2px;
+  --mg-padding-button:             var(--mg-spacing-150) var(--mg-spacing-300);
+  --mg-font-size-button:           #{$mg-font-size-400};
+  --mg-color-form-check:           var(--mg-color-interactive);
+  --mg-color-form-check--hover:    var(--mg-color-interactive-active);
+  --mg-color-form-check--checked:  var(--mg-color-interactive);
+  --mg-color-form-focus:           var(--mg-color-interactive);
+  --mg-radius-form-input:          var(--mg-spacing-100);
+  --mg-color-hero:                 var(--mg-color-interactive);
+  --mg-spacing-hero-overlay:       #{mg-rem(20)} 0;
+}

package/scss/assets/scss/_theme-preventionweb.scss

@@ -0,0 +1,37 @@
+// PreventionWeb theme — runtime CSS custom property overrides.
+// Applied when .mg-theme-preventionweb is present on <body> or a wrapping element.
+$_pw-color-primary--raw: 10 105 105;
+
+.mg-theme-preventionweb {
+  // Runtime marker: lets JS/tooling detect that this brand theme is active
+  // (guards the sub-brand body-class trap). See docs/RELEASE-2.0.md.
+  --mg-theme-loaded: preventionweb;
+  --mg-color-interactive:          #{$_pw-color-primary--raw};
+  --mg-color-interactive-active:   #{$_pw-color-primary--raw};
+  --mg-color-tag:                  var(--mg-color-interactive);
+  --mg-color-tag--hover:           var(--mg-color-interactive-active);
+  --mg-color-button-background:    #{$_pw-color-primary--raw};
+  --mg-color-button-background--hover: var(--mg-color-orange-900);
+  --mg-color-button-outline-primary: #{$_pw-color-primary--raw};
+  --mg-color-button-outline-primary--hover: var(--mg-color-orange-900);
+  --mg-color-button-outline-secondary: var(--mg-color-button-secondary-background);
+  --mg-color-button-outline-secondary--hover: var(--mg-color-button-secondary-background--hover);
+  --mg-radius-button:              var(--mg-spacing-50);
+  --mg-color-form-check:           var(--mg-color-interactive);
+  --mg-color-form-check--hover:    var(--mg-color-interactive-active);
+  --mg-color-form-check--checked:  var(--mg-color-interactive);
+  --mg-color-form-focus:           var(--mg-color-interactive);
+  --mg-color-hero:                 var(--mg-color-interactive);
+  --mg-spacing-hero-overlay:       #{mg-rem(20)} 0;
+  --mg-color-tabbar-background:    rgb(#{$_pw-color-primary--raw} / 0.1);
+  --mg-color-tab-background:       rgb(#{$_pw-color-primary--raw} / 0.1);
+  --mg-color-tab-border:           var(--mg-color-interactive);
+  --mg-color-tab-border--hover:    var(--mg-color-interactive);
+  --mg-color-tab-border--active:   var(--mg-color-tab-background);
+  --mg-color-tab-background--inactive: var(--mg-color-tabbar-background);
+  --mg-color-tab-background--hover: rgb(#{$_pw-color-primary--raw} / 0.2);
+  --mg-radius-tab:                 var(--mg-spacing-50) var(--mg-spacing-50) 0 0;
+  --mg-color-text-tab:             var(--mg-color-neutral-700);
+  --mg-color-text-tab--hover:      var(--mg-color-neutral-700);
+  --mg-color-text-tab-active:      var(--mg-color-neutral-900);
+}

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