diff --git a/components/style/gecko_bindings/sugar/style_complex_color.rs b/components/style/gecko_bindings/sugar/style_complex_color.rs
index aec334969d4..de1fad3bbab 100644
--- a/components/style/gecko_bindings/sugar/style_complex_color.rs
+++ b/components/style/gecko_bindings/sugar/style_complex_color.rs
@@ -49,8 +49,8 @@ impl From<ComputedColor> for StyleComplexColor {
     fn from(other: ComputedColor) -> Self {
         match other {
             GenericColor::Numeric(color) => color.into(),
-            GenericColor::Foreground => Self::current_color(),
-            GenericColor::Complex(color, ratios) => {
+            GenericColor::CurrentColor => Self::current_color(),
+            GenericColor::Complex { color, ratios } => {
                 debug_assert!(ratios != ComplexColorRatios::NUMERIC);
                 debug_assert!(ratios != ComplexColorRatios::FOREGROUND);
                 StyleComplexColor {
@@ -73,18 +73,18 @@ impl From<StyleComplexColor> for ComputedColor {
             },
             Tag::eForeground => {
                 debug_assert!(other.mBgRatio == 0. && other.mFgRatio == 1.);
-                GenericColor::Foreground
+                GenericColor::CurrentColor
             },
             Tag::eComplex => {
                 debug_assert!(other.mBgRatio != 1. || other.mFgRatio != 0.);
                 debug_assert!(other.mBgRatio != 0. || other.mFgRatio != 1.);
-                GenericColor::Complex(
-                    convert_nscolor_to_rgba(other.mColor),
-                    ComplexColorRatios {
+                GenericColor::Complex {
+                    color: convert_nscolor_to_rgba(other.mColor),
+                    ratios: ComplexColorRatios {
                         bg: other.mBgRatio,
                         fg: other.mFgRatio,
                     },
-                )
+                }
             },
             Tag::eAuto => unreachable!("Unsupport StyleComplexColor with tag eAuto"),
         }
diff --git a/components/style/properties/longhands/inherited_ui.mako.rs b/components/style/properties/longhands/inherited_ui.mako.rs
index 94709e1a681..07264372995 100644
--- a/components/style/properties/longhands/inherited_ui.mako.rs
+++ b/components/style/properties/longhands/inherited_ui.mako.rs
@@ -63,6 +63,7 @@ ${helpers.predefined_type(
     "generics::color::ColorOrAuto::Auto",
     spec="https://drafts.csswg.org/css-ui/#caret-color",
     animation_value_type="AnimatedCaretColor",
+    boxed=True,
     ignored_when_colors_disabled=True,
     products="gecko",
 )}
diff --git a/components/style/values/animated/color.rs b/components/style/values/animated/color.rs
index c8d5213b49b..14b1d0c539c 100644
--- a/components/style/values/animated/color.rs
+++ b/components/style/values/animated/color.rs
@@ -100,8 +100,8 @@ impl Color {
     fn effective_intermediate_rgba(&self) -> RGBA {
         match *self {
             GenericColor::Numeric(color) => color,
-            GenericColor::Foreground => RGBA::transparent(),
-            GenericColor::Complex(color, ratios) => RGBA {
+            GenericColor::CurrentColor => RGBA::transparent(),
+            GenericColor::Complex { color, ratios } => RGBA {
                 alpha: color.alpha * ratios.bg,
                 ..color.clone()
             },
@@ -111,8 +111,8 @@ impl Color {
     fn effective_ratios(&self) -> ComplexColorRatios {
         match *self {
             GenericColor::Numeric(..) => ComplexColorRatios::NUMERIC,
-            GenericColor::Foreground => ComplexColorRatios::FOREGROUND,
-            GenericColor::Complex(.., ratios) => ratios,
+            GenericColor::CurrentColor => ComplexColorRatios::CURRENT_COLOR,
+            GenericColor::Complex { ratios, .. } => ratios,
         }
     }
 }
@@ -128,18 +128,18 @@ impl Animate for Color {
 
         Ok(match (*self, *other, procedure) {
             // Any interpolation of currentcolor with currentcolor returns currentcolor.
-            (Foreground, Foreground, Procedure::Interpolate { .. }) => Foreground,
+            (CurrentColor, CurrentColor, Procedure::Interpolate { .. }) => CurrentColor,
             // Animating two numeric colors.
             (Numeric(c1), Numeric(c2), _) => Numeric(c1.animate(&c2, procedure)?),
             // Combinations of numeric color and currentcolor
-            (Foreground, Numeric(color), _) => Self::with_ratios(
+            (CurrentColor, Numeric(color), _) => Self::with_ratios(
                 color,
                 ComplexColorRatios {
                     bg: other_weight as f32,
                     fg: this_weight as f32,
                 },
             ),
-            (Numeric(color), Foreground, _) => Self::with_ratios(
+            (Numeric(color), CurrentColor, _) => Self::with_ratios(
                 color,
                 ComplexColorRatios {
                     bg: this_weight as f32,
@@ -148,7 +148,7 @@ impl Animate for Color {
             ),
 
             // Any other animation of currentcolor with currentcolor.
-            (Foreground, Foreground, _) => Self::with_ratios(
+            (CurrentColor, CurrentColor, _) => Self::with_ratios(
                 RGBA::transparent(),
                 ComplexColorRatios {
                     bg: 0.,
@@ -162,8 +162,8 @@ impl Animate for Color {
                 fn scaled_rgba(color: &Color) -> RGBA {
                     match *color {
                         GenericColor::Numeric(color) => color,
-                        GenericColor::Foreground => RGBA::transparent(),
-                        GenericColor::Complex(color, ratios) => RGBA {
+                        GenericColor::CurrentColor => RGBA::transparent(),
+                        GenericColor::Complex { color, ratios } => RGBA {
                             red: color.red * ratios.bg,
                             green: color.green * ratios.bg,
                             blue: color.blue * ratios.bg,
@@ -236,9 +236,9 @@ impl ComputeSquaredDistance for Color {
 
         // All comments from the Animate impl also applies here.
         Ok(match (*self, *other) {
-            (Foreground, Foreground) => SquaredDistance::from_sqrt(0.),
+            (CurrentColor, CurrentColor) => SquaredDistance::from_sqrt(0.),
             (Numeric(c1), Numeric(c2)) => c1.compute_squared_distance(&c2)?,
-            (Foreground, Numeric(color)) | (Numeric(color), Foreground) => {
+            (CurrentColor, Numeric(color)) | (Numeric(color), CurrentColor) => {
                 // `computed_squared_distance` is symmetric.
                 color.compute_squared_distance(&RGBA::transparent())? +
                     SquaredDistance::from_sqrt(1.)
diff --git a/components/style/values/computed/color.rs b/components/style/values/computed/color.rs
index 6795b399888..ade384a99ad 100644
--- a/components/style/values/computed/color.rs
+++ b/components/style/values/computed/color.rs
@@ -33,8 +33,8 @@ impl Color {
             // Common cases that the complex color is either pure numeric
             // color or pure currentcolor.
             GenericColor::Numeric(color) => return color,
-            GenericColor::Foreground => return fg_color,
-            GenericColor::Complex(color, ratios) => (color, ratios),
+            GenericColor::CurrentColor => return fg_color,
+            GenericColor::Complex { color, ratios } => (color, ratios),
         };
 
         // For the more complicated case that the alpha value differs,
@@ -76,7 +76,7 @@ impl ToCss for Color {
     {
         match *self {
             GenericColor::Numeric(color) => color.to_css(dest),
-            GenericColor::Foreground => CSSParserColor::CurrentColor.to_css(dest),
+            GenericColor::CurrentColor => CSSParserColor::CurrentColor.to_css(dest),
             _ => Ok(()),
         }
     }
diff --git a/components/style/values/generics/color.rs b/components/style/values/generics/color.rs
index 34b8f0608f8..5aa287baadf 100644
--- a/components/style/values/generics/color.rs
+++ b/components/style/values/generics/color.rs
@@ -7,44 +7,53 @@
 /// Ratios representing the contribution of color and currentcolor to
 /// the final color value.
 #[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, ToAnimatedValue, ToShmem)]
+#[repr(C)]
 pub struct ComplexColorRatios {
     /// Numeric color contribution.
     pub bg: f32,
-    /// Foreground color, aka currentcolor, contribution.
+    /// currentcolor contribution.
     pub fg: f32,
 }
 
 impl ComplexColorRatios {
     /// Ratios representing a `Numeric` color.
     pub const NUMERIC: ComplexColorRatios = ComplexColorRatios { bg: 1., fg: 0. };
-    /// Ratios representing the `Foreground` color.
-    pub const FOREGROUND: ComplexColorRatios = ComplexColorRatios { bg: 0., fg: 1. };
+    /// Ratios representing the `CurrentColor` color.
+    pub const CURRENT_COLOR: ComplexColorRatios = ComplexColorRatios { bg: 0., fg: 1. };
 }
 
 /// This enum represents a combined color from a numeric color and
 /// the current foreground color (currentcolor keyword).
 #[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, ToAnimatedValue, ToShmem)]
-pub enum Color<RGBA> {
+#[repr(C, u8)]
+pub enum GenericColor<RGBA> {
     ///  Numeric RGBA color.
     Numeric(RGBA),
 
     /// The current foreground color.
-    Foreground,
+    CurrentColor,
 
     /// A linear combination of numeric color and currentcolor.
     /// The formula is: `color * ratios.bg + currentcolor * ratios.fg`.
-    Complex(RGBA, ComplexColorRatios),
+    Complex {
+        /// The actual numeric color.
+        color: RGBA,
+        /// The ratios of mixing between numeric and currentcolor.
+        ratios: ComplexColorRatios,
+    }
 }
 
+pub use self::GenericColor as Color;
+
 impl<RGBA> Color<RGBA> {
     /// Create a color based upon the specified ratios.
     pub fn with_ratios(color: RGBA, ratios: ComplexColorRatios) -> Self {
         if ratios == ComplexColorRatios::NUMERIC {
             Color::Numeric(color)
-        } else if ratios == ComplexColorRatios::FOREGROUND {
-            Color::Foreground
+        } else if ratios == ComplexColorRatios::CURRENT_COLOR {
+            Color::CurrentColor
         } else {
-            Color::Complex(color, ratios)
+            Color::Complex { color, ratios }
         }
     }
 
@@ -55,7 +64,7 @@ impl<RGBA> Color<RGBA> {
 
     /// Returns a complex color value representing currentcolor.
     pub fn currentcolor() -> Self {
-        Color::Foreground
+        Color::CurrentColor
     }
 
     /// Whether it is a numeric color (no currentcolor component).
@@ -65,7 +74,7 @@ impl<RGBA> Color<RGBA> {
 
     /// Whether it is a currentcolor value (no numeric color component).
     pub fn is_currentcolor(&self) -> bool {
-        matches!(*self, Color::Foreground)
+        matches!(*self, Color::CurrentColor)
     }
 }
 
@@ -92,9 +101,12 @@ impl<RGBA> From<RGBA> for Color<RGBA> {
     ToCss,
     ToShmem,
 )]
-pub enum ColorOrAuto<C> {
-    /// A `<color>
+#[repr(C, u8)]
+pub enum GenericColorOrAuto<C> {
+    /// A `<color>`.
     Color(C),
     /// `auto`
     Auto,
 }
+
+pub use self::GenericColorOrAuto as ColorOrAuto;
diff --git a/components/style/values/specified/color.rs b/components/style/values/specified/color.rs
index 526ed260dbd..00a2033ef2a 100644
--- a/components/style/values/specified/color.rs
+++ b/components/style/values/specified/color.rs
@@ -387,8 +387,8 @@ impl ToComputedValue for Color {
     fn from_computed_value(computed: &ComputedColor) -> Self {
         match *computed {
             GenericColor::Numeric(color) => Color::rgba(color),
-            GenericColor::Foreground => Color::currentcolor(),
-            GenericColor::Complex(..) => Color::Complex(*computed),
+            GenericColor::CurrentColor => Color::currentcolor(),
+            GenericColor::Complex { .. } => Color::Complex(*computed),
         }
     }
 }