diff --git a/node/ast.d.ts b/node/ast.d.ts
index fba3f69e..19ab2c1f 100644
--- a/node/ast.d.ts
+++ b/node/ast.d.ts
@@ -4230,23 +4230,30 @@ export type PositionComponentFor_VerticalPositionKeyword =
  * See [RadialGradient](RadialGradient).
  */
 export type EndingShape =
-  | {
-      type: "circle";
-      value: Circle;
-    }
   | {
       type: "ellipse";
       value: Ellipse;
+    }
+  | {
+      type: "circle";
+      value: Circle;
     };
 /**
- * A circle ending shape for a `radial-gradient()`.
+ * An ellipse ending shape for a `radial-gradient()`.
  *
  * See [RadialGradient](RadialGradient).
  */
-export type Circle =
+export type Ellipse =
   | {
-      type: "radius";
-      value: Length;
+      type: "size";
+      /**
+       * The x-radius of the ellipse.
+       */
+      x: DimensionPercentageFor_LengthValue;
+      /**
+       * The y-radius of the ellipse.
+       */
+      y: DimensionPercentageFor_LengthValue;
     }
   | {
       type: "extent";
@@ -4259,21 +4266,14 @@ export type Circle =
  */
 export type ShapeExtent = "closest-side" | "farthest-side" | "closest-corner" | "farthest-corner";
 /**
- * An ellipse ending shape for a `radial-gradient()`.
+ * A circle ending shape for a `radial-gradient()`.
  *
  * See [RadialGradient](RadialGradient).
  */
-export type Ellipse =
+export type Circle =
   | {
-      type: "size";
-      /**
-       * The x-radius of the ellipse.
-       */
-      x: DimensionPercentageFor_LengthValue;
-      /**
-       * The y-radius of the ellipse.
-       */
-      y: DimensionPercentageFor_LengthValue;
+      type: "radius";
+      value: Length;
     }
   | {
       type: "extent";
@@ -4438,11 +4438,11 @@ export type WebKitGradientPointComponentFor_HorizontalPositionKeyword =
  */
 export type NumberOrPercentage =
   | {
-      type: "percentage";
+      type: "number";
       value: number;
     }
   | {
-      type: "number";
+      type: "percentage";
       value: number;
     };
 /**
@@ -4753,13 +4753,13 @@ export type RectFor_LengthOrNumber = [LengthOrNumber, LengthOrNumber, LengthOrNu
  * Either a [`<length>`](https://www.w3.org/TR/css-values-4/#lengths) or a [`<number>`](https://www.w3.org/TR/css-values-4/#numbers).
  */
 export type LengthOrNumber =
-  | {
-      type: "length";
-      value: Length;
-    }
   | {
       type: "number";
       value: number;
+    }
+  | {
+      type: "length";
+      value: Length;
     };
 /**
  * A single [border-image-repeat](https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat) keyword.
@@ -5570,22 +5570,16 @@ export type AnimationRangeStart = AnimationAttachmentRange;
  * A value for the [animation-range-start](https://drafts.csswg.org/scroll-animations/#animation-range-start) or [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
  */
 export type AnimationAttachmentRange =
-  | "Normal"
-  | {
-      LengthPercentage: DimensionPercentageFor_LengthValue;
-    }
-  | {
-      TimelineRange: {
-        /**
-         * The name of the timeline range.
-         */
-        name: TimelineRangeName;
-        /**
-         * The offset from the start of the named timeline range.
-         */
-        offset: DimensionPercentageFor_LengthValue;
-      };
-    };
+  "normal" | DimensionPercentageFor_LengthValue | {
+    /**
+     * The name of the timeline range.
+     */
+    name: TimelineRangeName;
+    /**
+     * The offset from the start of the named timeline range.
+     */
+    offset: DimensionPercentageFor_LengthValue;
+  };
 /**
  * A [view progress timeline range](https://drafts.csswg.org/scroll-animations/#view-timelines-ranges)
  */
@@ -5709,7 +5703,7 @@ export type Transform =
 /**
  * A value for the [transform-style](https://drafts.csswg.org/css-transforms-2/#transform-style-property) property.
  */
-export type TransformStyle = "flat" | "preserve-3d";
+export type TransformStyle = "flat" | "preserve3d";
 /**
  * A value for the [transform-box](https://drafts.csswg.org/css-transforms-1/#transform-box) property.
  */
@@ -6105,9 +6099,6 @@ export type MarkerSide = "match-self" | "match-parent";
  * An SVG [`<paint>`](https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint) value used in the `fill` and `stroke` properties.
  */
 export type SVGPaint =
-  | {
-      type: "none";
-    }
   | {
       /**
        * A fallback to be used used in case the paint server cannot be resolved.
@@ -6128,6 +6119,9 @@ export type SVGPaint =
     }
   | {
       type: "context-stroke";
+    }
+  | {
+      type: "none";
     };
 /**
  * A fallback for an SVG paint in case a paint server `url()` cannot be resolved.
@@ -6938,6 +6932,10 @@ export type KeyframeSelector =
     }
   | {
       type: "to";
+    }
+  | {
+      type: "timeline-range-percentage";
+      value: TimelineRangePercentage;
     };
 /**
  * KeyframesName
@@ -9164,6 +9162,19 @@ export interface Keyframe<D = Declaration> {
    */
   selectors: KeyframeSelector[];
 }
+/**
+ * A percentage of a given timeline range
+ */
+export interface TimelineRangePercentage {
+  /**
+   * The name of the timeline range.
+   */
+  name: TimelineRangeName;
+  /**
+   * The percentage progress between the start and end of the range.
+   */
+  percentage: number;
+}
 /**
  * A [@font-face](https://drafts.csswg.org/css-fonts/#font-face-rule) rule.
  */
diff --git a/scripts/build-ast.js b/scripts/build-ast.js
index 7b7fc020..de0e7f20 100644
--- a/scripts/build-ast.js
+++ b/scripts/build-ast.js
@@ -66,6 +66,15 @@ compileFromFile('node/ast.json', {
         path.node.typeAnnotation.types[1].members[0].key.name === 'xyz'
       ) {
         path.get('typeAnnotation.types.1').replaceWith(path.node.typeAnnotation.types[1].members[0].typeAnnotation.typeAnnotation);
+      } else if (path.node.id.name === 'AnimationAttachmentRange' && path.node.typeAnnotation.type === 'TSUnionType') {
+        let types = path.node.typeAnnotation.types;
+        if (types[1].type === 'TSTypeLiteral' && types[1].members[0].key.name === 'lengthpercentage') {
+          path.get('typeAnnotation.types.1').replaceWith(path.node.typeAnnotation.types[1].members[0].typeAnnotation.typeAnnotation);
+        }
+
+        if (types[2].type === 'TSTypeLiteral' && types[2].members[0].key.name === 'timelinerange') {
+          path.get('typeAnnotation.types.2').replaceWith(path.node.typeAnnotation.types[2].members[0].typeAnnotation.typeAnnotation);
+        }
       }
     }
   });
diff --git a/src/macros.rs b/src/macros.rs
index 7e573816..8019c58c 100644
--- a/src/macros.rs
+++ b/src/macros.rs
@@ -10,7 +10,7 @@ macro_rules! enum_property {
   ) => {
     #[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
     #[cfg_attr(feature = "visitor", derive(Visit))]
-    #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize), serde(rename_all = "lowercase"))]
+    #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize), serde(rename_all = "kebab-case"))]
     #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
     #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
     $(#[$outer])*
diff --git a/src/properties/animation.rs b/src/properties/animation.rs
index 9855127c..f018f4af 100644
--- a/src/properties/animation.rs
+++ b/src/properties/animation.rs
@@ -379,7 +379,11 @@ impl ToCss for ViewTimeline {
 /// A [view progress timeline range](https://drafts.csswg.org/scroll-animations/#view-timelines-ranges)
 #[derive(Debug, Clone, PartialEq, Parse, ToCss)]
 #[cfg_attr(feature = "visitor", derive(Visit))]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "kebab-case")
+)]
 #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
 #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
 pub enum TimelineRangeName {
@@ -402,15 +406,17 @@ pub enum TimelineRangeName {
 /// or [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
 #[derive(Debug, Clone, PartialEq)]
 #[cfg_attr(feature = "visitor", derive(Visit))]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize), serde(rename_all = "lowercase"))]
 #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
 #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
 pub enum AnimationAttachmentRange {
   /// The start of the animation’s attachment range is the start of its associated timeline.
   Normal,
   /// The animation attachment range starts at the specified point on the timeline measuring from the start of the timeline.
+  #[cfg_attr(feature = "serde", serde(untagged))]
   LengthPercentage(LengthPercentage),
   /// The animation attachment range starts at the specified point on the timeline measuring from the start of the specified named timeline range.
+  #[cfg_attr(feature = "serde", serde(untagged))]
   TimelineRange {
     /// The name of the timeline range.
     name: TimelineRangeName,
diff --git a/src/properties/svg.rs b/src/properties/svg.rs
index 150e5a25..16b38456 100644
--- a/src/properties/svg.rs
+++ b/src/properties/svg.rs
@@ -209,66 +209,101 @@ pub enum Marker<'i> {
   Url(Url<'i>),
 }
 
-enum_property! {
-  /// A value for the [color-interpolation](https://www.w3.org/TR/SVG2/painting.html#ColorInterpolation) property.
-  pub enum ColorInterpolation {
-    /// The UA can choose between sRGB or linearRGB.
-    Auto,
-    /// Color interpolation occurs in the sRGB color space.
-    SRGB,
-    /// Color interpolation occurs in the linearized RGB color space
-    LinearRGB,
-  }
+/// A value for the [color-interpolation](https://www.w3.org/TR/SVG2/painting.html#ColorInterpolation) property.
+#[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "lowercase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+pub enum ColorInterpolation {
+  /// The UA can choose between sRGB or linearRGB.
+  Auto,
+  /// Color interpolation occurs in the sRGB color space.
+  SRGB,
+  /// Color interpolation occurs in the linearized RGB color space
+  LinearRGB,
 }
 
-enum_property! {
-  /// A value for the [color-rendering](https://www.w3.org/TR/SVG2/painting.html#ColorRendering) property.
-  pub enum ColorRendering {
-    /// The UA can choose a tradeoff between speed and quality.
-    Auto,
-    /// The UA shall optimize speed over quality.
-    OptimizeSpeed,
-    /// The UA shall optimize quality over speed.
-    OptimizeQuality,
-  }
+/// A value for the [color-rendering](https://www.w3.org/TR/SVG2/painting.html#ColorRendering) property.
+#[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "lowercase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+pub enum ColorRendering {
+  /// The UA can choose a tradeoff between speed and quality.
+  Auto,
+  /// The UA shall optimize speed over quality.
+  OptimizeSpeed,
+  /// The UA shall optimize quality over speed.
+  OptimizeQuality,
 }
 
-enum_property! {
-  /// A value for the [shape-rendering](https://www.w3.org/TR/SVG2/painting.html#ShapeRendering) property.
-  pub enum ShapeRendering {
-    /// The UA can choose an appropriate tradeoff.
-    Auto,
-    /// The UA shall optimize speed.
-    OptimizeSpeed,
-    /// The UA shall optimize crisp edges.
-    CrispEdges,
-    /// The UA shall optimize geometric precision.
-    GeometricPrecision,
-  }
+/// A value for the [shape-rendering](https://www.w3.org/TR/SVG2/painting.html#ShapeRendering) property.
+#[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "lowercase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+pub enum ShapeRendering {
+  /// The UA can choose an appropriate tradeoff.
+  Auto,
+  /// The UA shall optimize speed.
+  OptimizeSpeed,
+  /// The UA shall optimize crisp edges.
+  CrispEdges,
+  /// The UA shall optimize geometric precision.
+  GeometricPrecision,
 }
 
-enum_property! {
-  /// A value for the [text-rendering](https://www.w3.org/TR/SVG2/painting.html#TextRendering) property.
-  pub enum TextRendering {
-    /// The UA can choose an appropriate tradeoff.
-    Auto,
-    /// The UA shall optimize speed.
-    OptimizeSpeed,
-    /// The UA shall optimize legibility.
-    OptimizeLegibility,
-    /// The UA shall optimize geometric precision.
-    GeometricPrecision,
-  }
+/// A value for the [text-rendering](https://www.w3.org/TR/SVG2/painting.html#TextRendering) property.
+#[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "lowercase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+pub enum TextRendering {
+  /// The UA can choose an appropriate tradeoff.
+  Auto,
+  /// The UA shall optimize speed.
+  OptimizeSpeed,
+  /// The UA shall optimize legibility.
+  OptimizeLegibility,
+  /// The UA shall optimize geometric precision.
+  GeometricPrecision,
 }
 
-enum_property! {
-  /// A value for the [image-rendering](https://www.w3.org/TR/SVG2/painting.html#ImageRendering) property.
-  pub enum ImageRendering {
-    /// The UA can choose a tradeoff between speed and quality.
-    Auto,
-    /// The UA shall optimize speed over quality.
-    OptimizeSpeed,
-    /// The UA shall optimize quality over speed.
-    OptimizeQuality,
-  }
+/// A value for the [image-rendering](https://www.w3.org/TR/SVG2/painting.html#ImageRendering) property.
+#[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "lowercase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+pub enum ImageRendering {
+  /// The UA can choose a tradeoff between speed and quality.
+  Auto,
+  /// The UA shall optimize speed over quality.
+  OptimizeSpeed,
+  /// The UA shall optimize quality over speed.
+  OptimizeQuality,
 }
diff --git a/src/rules/keyframes.rs b/src/rules/keyframes.rs
index 9d1e758d..02d0943b 100644
--- a/src/rules/keyframes.rs
+++ b/src/rules/keyframes.rs
@@ -277,20 +277,17 @@ impl<'i> ToCss for KeyframesRule<'i> {
 #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
 #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
 pub struct TimelineRangePercentage {
-  /// A named timeline range
-  timeline_range_name: TimelineRangeName,
-  /// The percentage progress between the start and end of the rage
-  percentage: Percentage
+  /// The name of the timeline range.
+  name: TimelineRangeName,
+  /// The percentage progress between the start and end of the range.
+  percentage: Percentage,
 }
 
 impl<'i> Parse<'i> for TimelineRangePercentage {
   fn parse<'t>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ParserError<'i>>> {
-    let timeline_range_name = TimelineRangeName::parse(input)?;
+    let name = TimelineRangeName::parse(input)?;
     let percentage = Percentage::parse(input)?;
-    Ok(TimelineRangePercentage {
-      timeline_range_name,
-      percentage
-    })
+    Ok(TimelineRangePercentage { name, percentage })
   }
 }
 
@@ -313,7 +310,7 @@ pub enum KeyframeSelector {
   /// The `to` keyword. Equivalent to 100%.
   To,
   /// A [named timeline range selector](https://drafts.csswg.org/scroll-animations-1/#named-range-keyframes)
-  TimelineRangePercentage(TimelineRangePercentage)
+  TimelineRangePercentage(TimelineRangePercentage),
 }
 
 impl ToCss for KeyframeSelector {
@@ -338,8 +335,8 @@ impl ToCss for KeyframeSelector {
       }
       KeyframeSelector::To => dest.write_str("to"),
       KeyframeSelector::TimelineRangePercentage(TimelineRangePercentage {
-        timeline_range_name,
-        percentage
+        name: timeline_range_name,
+        percentage,
       }) => {
         timeline_range_name.to_css(dest)?;
         dest.write_char(' ')?;
diff --git a/src/values/color.rs b/src/values/color.rs
index b91c1426..274c3f43 100644
--- a/src/values/color.rs
+++ b/src/values/color.rs
@@ -3580,98 +3580,104 @@ impl<'i, V: ?Sized + Visitor<'i, T>, T: Visit<'i, T, V>> Visit<'i, T, V> for RGB
   }
 }
 
-enum_property! {
-  #[css(case = lower)]
-  /// A CSS [system color](https://drafts.csswg.org/css-color/#css-system-colors) keyword.
-  pub enum SystemColor {
-    /// Background of accented user interface controls.
-    AccentColor,
-    /// Text of accented user interface controls.
-    AccentColorText,
-    /// Text in active links. For light backgrounds, traditionally red.
-    ActiveText,
-    /// The base border color for push buttons.
-    ButtonBorder,
-    /// The face background color for push buttons.
-    ButtonFace,
-    /// Text on push buttons.
-    ButtonText,
-    /// Background of application content or documents.
-    Canvas,
-    /// Text in application content or documents.
-    CanvasText,
-    /// Background of input fields.
-    Field,
-    /// Text in input fields.
-    FieldText,
-    /// Disabled text. (Often, but not necessarily, gray.)
-    GrayText,
-    /// Background of selected text, for example from ::selection.
-    Highlight,
-    /// Text of selected text.
-    HighlightText,
-    /// Text in non-active, non-visited links. For light backgrounds, traditionally blue.
-    LinkText,
-    /// Background of text that has been specially marked (such as by the HTML mark element).
-    Mark,
-    /// Text that has been specially marked (such as by the HTML mark element).
-    MarkText,
-    /// Background of selected items, for example a selected checkbox.
-    SelectedItem,
-    /// Text of selected items.
-    SelectedItemText,
-    /// Text in visited links. For light backgrounds, traditionally purple.
-    VisitedText,
-
-    // Deprecated colors: https://drafts.csswg.org/css-color/#deprecated-system-colors
-
-    /// Active window border. Same as ButtonBorder.
-    ActiveBorder,
-    /// Active window caption. Same as Canvas.
-    ActiveCaption,
-    /// Background color of multiple document interface. Same as Canvas.
-    AppWorkspace,
-    /// Desktop background. Same as Canvas.
-    Background,
-    /// The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.
-    ButtonHighlight,
-    /// The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.
-    ButtonShadow,
-    /// Text in caption, size box, and scrollbar arrow box. Same as CanvasText.
-    CaptionText,
-    /// Inactive window border. Same as ButtonBorder.
-    InactiveBorder,
-    /// Inactive window caption. Same as Canvas.
-    InactiveCaption,
-    /// Color of text in an inactive caption. Same as GrayText.
-    InactiveCaptionText,
-    /// Background color for tooltip controls. Same as Canvas.
-    InfoBackground,
-    /// Text color for tooltip controls. Same as CanvasText.
-    InfoText,
-    /// Menu background. Same as Canvas.
-    Menu,
-    /// Text in menus. Same as CanvasText.
-    MenuText,
-    /// Scroll bar gray area. Same as Canvas.
-    Scrollbar,
-    /// The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
-    ThreeDDarkShadow,
-    /// The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonFace.
-    ThreeDFace,
-    /// The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
-    ThreeDHighlight,
-    /// The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
-    ThreeDLightShadow,
-    /// The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
-    ThreeDShadow,
-    /// Window background. Same as Canvas.
-    Window,
-    /// Window frame. Same as ButtonBorder.
-    WindowFrame,
-    /// Text in windows. Same as CanvasText.
-    WindowText,
-  }
+#[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
+#[css(case = lower)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "lowercase")
+)]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+#[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
+/// A CSS [system color](https://drafts.csswg.org/css-color/#css-system-colors) keyword.
+pub enum SystemColor {
+  /// Background of accented user interface controls.
+  AccentColor,
+  /// Text of accented user interface controls.
+  AccentColorText,
+  /// Text in active links. For light backgrounds, traditionally red.
+  ActiveText,
+  /// The base border color for push buttons.
+  ButtonBorder,
+  /// The face background color for push buttons.
+  ButtonFace,
+  /// Text on push buttons.
+  ButtonText,
+  /// Background of application content or documents.
+  Canvas,
+  /// Text in application content or documents.
+  CanvasText,
+  /// Background of input fields.
+  Field,
+  /// Text in input fields.
+  FieldText,
+  /// Disabled text. (Often, but not necessarily, gray.)
+  GrayText,
+  /// Background of selected text, for example from ::selection.
+  Highlight,
+  /// Text of selected text.
+  HighlightText,
+  /// Text in non-active, non-visited links. For light backgrounds, traditionally blue.
+  LinkText,
+  /// Background of text that has been specially marked (such as by the HTML mark element).
+  Mark,
+  /// Text that has been specially marked (such as by the HTML mark element).
+  MarkText,
+  /// Background of selected items, for example a selected checkbox.
+  SelectedItem,
+  /// Text of selected items.
+  SelectedItemText,
+  /// Text in visited links. For light backgrounds, traditionally purple.
+  VisitedText,
+
+  // Deprecated colors: https://drafts.csswg.org/css-color/#deprecated-system-colors
+  /// Active window border. Same as ButtonBorder.
+  ActiveBorder,
+  /// Active window caption. Same as Canvas.
+  ActiveCaption,
+  /// Background color of multiple document interface. Same as Canvas.
+  AppWorkspace,
+  /// Desktop background. Same as Canvas.
+  Background,
+  /// The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.
+  ButtonHighlight,
+  /// The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.
+  ButtonShadow,
+  /// Text in caption, size box, and scrollbar arrow box. Same as CanvasText.
+  CaptionText,
+  /// Inactive window border. Same as ButtonBorder.
+  InactiveBorder,
+  /// Inactive window caption. Same as Canvas.
+  InactiveCaption,
+  /// Color of text in an inactive caption. Same as GrayText.
+  InactiveCaptionText,
+  /// Background color for tooltip controls. Same as Canvas.
+  InfoBackground,
+  /// Text color for tooltip controls. Same as CanvasText.
+  InfoText,
+  /// Menu background. Same as Canvas.
+  Menu,
+  /// Text in menus. Same as CanvasText.
+  MenuText,
+  /// Scroll bar gray area. Same as Canvas.
+  Scrollbar,
+  /// The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
+  ThreeDDarkShadow,
+  /// The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonFace.
+  ThreeDFace,
+  /// The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
+  ThreeDHighlight,
+  /// The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
+  ThreeDLightShadow,
+  /// The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.
+  ThreeDShadow,
+  /// Window background. Same as Canvas.
+  Window,
+  /// Window frame. Same as ButtonBorder.
+  WindowFrame,
+  /// Text in windows. Same as CanvasText.
+  WindowText,
 }
 
 impl IsCompatible for SystemColor {