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

package/scss/Components/ErrorPages/error-pages.scss

@@ -1,11 +1,11 @@
 .mg-error-page {
   min-height: 100vh;
-  background-color: $mg-color-blue-900;
-  color: $mg-color-text;
+  background-color: rgb(var(--mg-color-blue-900));
+  color: rgb(var(--mg-color-text));
   padding-bottom: mg-rem(20);
 
   h1 {
-    color: $mg-color-blue-900;
+    color: rgb(var(--mg-color-blue-900));
     font-size: mg-rem(14);
     padding: 0;
     margin: 0;
@@ -18,13 +18,13 @@
     align-items: center;
 
     input[type="search"] {
-      border: 1px solid $mg-color-neutral-100;
+      border: 1px solid rgb(var(--mg-color-neutral-100));
       max-width: 300px;
     }
   }
 
   &__container {
-    background: $mg-color-neutral-0;
+    background: rgb(var(--mg-color-neutral-0));
     padding: mg-rem(20) mg-rem(15) mg-rem(10);
     max-width: 900px;
     margin: mg-rem(20) auto;
@@ -40,7 +40,7 @@
   }
 
   &--challenge {
-    background-color: $mg-color-neutral-25;
+    background-color: rgb(var(--mg-color-neutral-25));
 
     .mg-error-page__container {
       text-align: center;
@@ -61,7 +61,7 @@
     h1 {
       font-size: mg-rem(23);
       font-weight: 600;
-      color: $mg-color-text;
+      color: rgb(var(--mg-color-text));
       margin: 0 0 mg-rem(5);
     }
   }

package/scss/Components/Footer/footer.scss

@@ -4,13 +4,13 @@
 
 .mg-footer--about-footer {
   text-wrap: balance;
-  color: $mg-color-white;
-  padding-bottom: $mg-spacing-200;
-  padding-top: $mg-spacing-200;
+  color: rgb(var(--mg-color-white));
+  padding-bottom: var(--mg-spacing-200);
+  padding-top: var(--mg-spacing-200);
 
   a,
   a:hover {
-    color: $mg-color-white;
+    color: rgb(var(--mg-color-white));
   }
 
   .container {
@@ -40,26 +40,26 @@
 // Utility footer bar — secondary navigation below the main footer
 // Used by sub-branded sites (e.g. DELTA) for product-level links
 .mg-footer-bar {
-  border-top: 1px solid $mg-color-neutral-200;
-  padding: $mg-spacing-150 0;
+  border-top: 1px solid rgb(var(--mg-color-neutral-200));
+  padding: var(--mg-spacing-150) 0;
   font-size: $mg-font-size-300;
-  color: $mg-color-neutral-600;
+  color: rgb(var(--mg-color-neutral-600));
 
   &__row {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    gap: $mg-spacing-100;
+    gap: var(--mg-spacing-100);
   }
 
   &__links {
     display: flex;
     flex-wrap: wrap;
-    gap: $mg-spacing-50 $mg-spacing-200;
+    gap: var(--mg-spacing-50) var(--mg-spacing-200);
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
     }
   }
 
@@ -70,8 +70,8 @@
 
   &__divider {
     border: 0;
-    border-top: 1px solid $mg-color-neutral-200;
-    margin: $mg-spacing-100 0;
+    border-top: 1px solid rgb(var(--mg-color-neutral-200));
+    margin: var(--mg-spacing-100) 0;
   }
 }
 

package/scss/Components/Forms/FormGroup/form-group.scss

@@ -10,15 +10,15 @@
     @extend %paragraph-font-300;
 
     display: block;
-    margin-bottom: $mg-spacing-50;
+    margin-bottom: var(--mg-spacing-50);
     padding: 0;
   }
 
   &--disabled &__legend {
-    color: $mg-color-neutral-400;
+    color: rgb(var(--mg-color-neutral-400));
   }
 
   &--error &__legend {
-    color: $mg-color-red-900;
+    color: rgb(var(--mg-color-red-900));
   }
 }

package/scss/Components/Forms/Select/select.scss

@@ -4,7 +4,7 @@
 [dir="rtl"] {
   .mg-form-select {
     background-position: left mg-rem(6.25) center;
-    padding-left: $mg-spacing-200;
+    padding-left: var(--mg-spacing-200);
     padding-right: mg-rem(6.25);
   }
 }

package/scss/Components/Forms/TextInput/text-input.scss

@@ -2,7 +2,7 @@
 // Shared form styles live in _form-base.scss.
 
 .mg-form-input[type="date"] {
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
 
   &::-webkit-calendar-picker-indicator {
     appearance: none;

package/scss/Components/Forms/_form-base.scss

@@ -6,7 +6,7 @@
 // -----------------------------------------------------------------------------
 .mg-form-field {
   display: block;
-  margin-bottom: $mg-spacing-100;
+  margin-bottom: var(--mg-spacing-100);
 }
 
 // -----------------------------------------------------------------------------
@@ -17,11 +17,11 @@
   font-size: $mg-font-size-300;
 
   &--disabled {
-    color: $mg-color-neutral-400;
+    color: rgb(var(--mg-color-neutral-400));
   }
 
   &--required::after {
-    color: $mg-color-red-900;
+    color: rgb(var(--mg-color-red-900));
     content: " *";
   }
 }
@@ -33,23 +33,23 @@
   @extend %background-white;
 
   appearance: none;
-  border: 2px solid $mg-color-black;
-  border-radius: $mg-radius-form-input;
+  border: 2px solid rgb(var(--mg-color-black));
+  border-radius: var(--mg-radius-form-input);
   box-sizing: border-box;
   display: block;
   font-family: $mg-font-family;
   font-size: $mg-font-size-300;
   height: 46px;
-  margin-top: $mg-spacing-25;
+  margin-top: var(--mg-spacing-25);
   padding: mg-rem(6.25);
   width: 100%;
 
   &::placeholder {
-    color: $mg-color-neutral-500;
+    color: rgb(var(--mg-color-neutral-500));
   }
 
   &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-form-focus;
+    box-shadow: 0 0 4px rgb(var(--mg-color-form-focus));
     outline: 0;
   }
 }
@@ -58,17 +58,17 @@
   @extend %mg-form-input-base;
 
   &--disabled {
-    background-color: $mg-color-white;
-    border-color: $mg-color-neutral-400;
-    color: $mg-color-neutral-400;
+    background-color: rgb(var(--mg-color-white));
+    border-color: rgb(var(--mg-color-neutral-400));
+    color: rgb(var(--mg-color-neutral-400));
 
     &::placeholder {
-      color: $mg-color-neutral-400;
+      color: rgb(var(--mg-color-neutral-400));
     }
   }
 
   &--error {
-    border-color: $mg-color-red-900;
+    border-color: rgb(var(--mg-color-red-900));
   }
 }
 
@@ -83,17 +83,17 @@
   resize: vertical;
 
   &--disabled {
-    background-color: $mg-color-white;
-    border-color: $mg-color-neutral-400;
-    color: $mg-color-neutral-400;
+    background-color: rgb(var(--mg-color-white));
+    border-color: rgb(var(--mg-color-neutral-400));
+    color: rgb(var(--mg-color-neutral-400));
 
     &::placeholder {
-      color: $mg-color-neutral-400;
+      color: rgb(var(--mg-color-neutral-400));
     }
   }
 
   &--error {
-    border-color: $mg-color-red-900;
+    border-color: rgb(var(--mg-color-red-900));
   }
 }
 
@@ -104,17 +104,17 @@
   @extend %background-white;
 
   appearance: none;
-  border: 2px solid $mg-color-black;
-  border-radius: $mg-radius-form-input;
+  border: 2px solid rgb(var(--mg-color-black));
+  border-radius: var(--mg-radius-form-input);
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   font-family: $mg-font-family;
   font-size: $mg-font-size-300;
   height: 46px;
-  margin-top: $mg-spacing-25;
+  margin-top: var(--mg-spacing-25);
   padding: mg-rem(6.25);
-  padding-right: $mg-spacing-200;
+  padding-right: var(--mg-spacing-200);
   width: 100%;
 
   // Custom dropdown arrow
@@ -123,19 +123,19 @@
   background-repeat: no-repeat;
 
   &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-form-focus;
+    box-shadow: 0 0 4px rgb(var(--mg-color-form-focus));
     outline: 0;
   }
 
   &--disabled {
-    background-color: $mg-color-white;
-    border-color: $mg-color-neutral-400;
-    color: $mg-color-neutral-400;
+    background-color: rgb(var(--mg-color-white));
+    border-color: rgb(var(--mg-color-neutral-400));
+    color: rgb(var(--mg-color-neutral-400));
     cursor: default;
   }
 
   &--error {
-    border-color: $mg-color-red-900;
+    border-color: rgb(var(--mg-color-red-900));
   }
 }
 
@@ -150,18 +150,18 @@
   // Base input (shared between checkbox and radio)
   &__input {
     appearance: none;
-    border: 2px solid $mg-color-form-check;
+    border: 2px solid rgb(var(--mg-color-form-check));
     cursor: pointer;
     height: 16px;
     margin: 0;
     width: 16px;
 
     &:hover {
-      border-color: $mg-color-form-check--hover;
+      border-color: rgb(var(--mg-color-form-check--hover));
     }
 
     &:focus-visible {
-      box-shadow: 0 0 4px $mg-color-form-focus;
+      box-shadow: 0 0 4px rgb(var(--mg-color-form-focus));
       outline: 0;
     }
 
@@ -172,23 +172,23 @@
     &--radio {
       background-color: transparent;
       border-radius: 100%;
-      box-shadow: inset 0 0 0 $mg-color-white;
+      box-shadow: inset 0 0 0 rgb(var(--mg-color-white));
     }
 
     &--disabled {
-      border-color: $mg-color-neutral-400;
+      border-color: rgb(var(--mg-color-neutral-400));
       cursor: default;
 
       &:hover {
-        border-color: $mg-color-neutral-400;
+        border-color: rgb(var(--mg-color-neutral-400));
       }
     }
 
     &--error {
-      border-color: $mg-color-red-900;
+      border-color: rgb(var(--mg-color-red-900));
 
       &:hover {
-        border-color: $mg-color-red-900;
+        border-color: rgb(var(--mg-color-red-900));
       }
     }
   }
@@ -203,64 +203,64 @@
 
 // Checked states (must be outside BEM nesting for specificity)
 .mg-form-check__input--checkbox:checked {
-  background-color: $mg-color-form-check--checked;
+  background-color: rgb(var(--mg-color-form-check--checked));
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8l3 3 6-6'/%3E%3C/svg%3E");
-  border-color: $mg-color-form-check--checked;
+  border-color: rgb(var(--mg-color-form-check--checked));
 }
 
 .mg-form-check__input--radio:checked {
-  background-color: $mg-color-form-check--checked;
-  box-shadow: inset 0 0 0 3px $mg-color-white;
+  background-color: rgb(var(--mg-color-form-check--checked));
+  box-shadow: inset 0 0 0 3px rgb(var(--mg-color-white));
 }
 
 // -----------------------------------------------------------------------------
 // Help text
 // -----------------------------------------------------------------------------
 .mg-form-help {
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
   font-size: $mg-font-size-200;
   margin-bottom: 0;
-  margin-top: $mg-spacing-25;
+  margin-top: var(--mg-spacing-25);
 }
 
 // -----------------------------------------------------------------------------
 // Error text
 // -----------------------------------------------------------------------------
 .mg-form-error {
-  color: $mg-color-red-900;
+  color: rgb(var(--mg-color-red-900));
   font-size: $mg-font-size-300;
   margin-bottom: 0;
-  margin-top: $mg-spacing-25;
+  margin-top: var(--mg-spacing-25);
 }
 
 // -----------------------------------------------------------------------------
 // Form error summary
 // -----------------------------------------------------------------------------
 .mg-form-error-summary {
-  background-color: $mg-color-red-50;
-  border-left: 4px solid $mg-color-red-900;
-  margin-bottom: $mg-spacing-200;
-  padding: $mg-spacing-150;
+  background-color: rgb(var(--mg-color-red-50));
+  border-left: 4px solid rgb(var(--mg-color-red-900));
+  margin-bottom: var(--mg-spacing-200);
+  padding: var(--mg-spacing-150);
 
   &:focus {
-    outline: 3px solid $mg-color-blue-800;
+    outline: 3px solid rgb(var(--mg-color-blue-800));
     outline-offset: 0;
   }
 
   &__title {
-    color: $mg-color-red-900;
+    color: rgb(var(--mg-color-red-900));
     font-size: $mg-font-size-300;
     font-weight: 700;
-    margin-bottom: $mg-spacing-75;
+    margin-bottom: var(--mg-spacing-75);
     margin-top: 0;
   }
 
   &__list {
     margin: 0;
-    padding-left: $mg-spacing-100;
+    padding-left: var(--mg-spacing-100);
 
     li {
-      margin-bottom: $mg-spacing-50;
+      margin-bottom: var(--mg-spacing-50);
 
       &:last-child {
         margin-bottom: 0;
@@ -268,7 +268,7 @@
     }
 
     a {
-      color: $mg-color-red-900;
+      color: rgb(var(--mg-color-red-900));
       font-weight: 600;
       text-decoration: underline;
     }
@@ -296,7 +296,7 @@
 [dir="rtl"] {
   .mg-form-select {
     background-position: left mg-rem(6.25) center;
-    padding-left: $mg-spacing-200;
+    padding-left: var(--mg-spacing-200);
     padding-right: mg-rem(6.25);
   }