@gitlab/ui 85.2.1 → 85.3.0

package/src/tokens/build/json/tokens.json

@@ -8969,6 +8969,375 @@
       }
     }
   },
+  "control": {
+    "background": {
+      "color": {
+        "default": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) default background.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) default background."
+          },
+          "name": "CONTROL_BACKGROUND_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "control",
+            "background",
+            "color",
+            "default"
+          ]
+        },
+        "disabled": {
+          "value": "#fbfafd",
+          "$type": "color",
+          "comment": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.10}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "comment": "Used for disabled form control (checkbox, input, radio button, textarea) background."
+          },
+          "name": "CONTROL_BACKGROUND_COLOR_DISABLED",
+          "attributes": {},
+          "path": [
+            "control",
+            "background",
+            "color",
+            "disabled"
+          ]
+        },
+        "selected": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background."
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover."
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_HOVER",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover."
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "focus"
+            ]
+          }
+        }
+      }
+    },
+    "border": {
+      "color": {
+        "default": {
+          "value": "#89888d",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) default border.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.400}",
+              "dark": "{color.neutral.500}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) default border."
+          },
+          "name": "CONTROL_BORDER_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "default"
+          ]
+        },
+        "hover": {
+          "value": "#626168",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) border on hover.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.600}",
+              "dark": "{color.neutral.300}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) border on hover."
+          },
+          "name": "CONTROL_BORDER_COLOR_HOVER",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "hover"
+          ]
+        },
+        "focus": {
+          "value": "#333238",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) border on focus.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.900}",
+              "dark": "{color.neutral.50}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) border on focus."
+          },
+          "name": "CONTROL_BORDER_COLOR_FOCUS",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "focus"
+          ]
+        },
+        "disabled": {
+          "value": "#dcdcde",
+          "$type": "color",
+          "comment": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.100}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "comment": "Used for disabled form control (input, radio button, checkbox, textarea) border."
+          },
+          "name": "CONTROL_BORDER_COLOR_DISABLED",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "disabled"
+          ]
+        },
+        "error": {
+          "value": "#dd2b0e",
+          "$type": "color",
+          "comment": "Used for invalid form control (input, textarea) border.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "comment": "Used for invalid form control (input, textarea) border."
+          },
+          "name": "CONTROL_BORDER_COLOR_ERROR",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "error"
+          ]
+        }
+      }
+    },
+    "text": {
+      "color": {
+        "error": {
+          "value": "#dd2b0e",
+          "$type": "color",
+          "comment": "Used for the helper text when the input is invalid.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "comment": "Used for the helper text when the input is invalid."
+          },
+          "name": "CONTROL_TEXT_COLOR_ERROR",
+          "attributes": {},
+          "path": [
+            "control",
+            "text",
+            "color",
+            "error"
+          ]
+        },
+        "valid": {
+          "value": "#108548",
+          "$type": "color",
+          "comment": "Used for the helper text when the input is valid.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.green.500}",
+              "dark": "{color.green.400}"
+            },
+            "$type": "color",
+            "comment": "Used for the helper text when the input is valid."
+          },
+          "name": "CONTROL_TEXT_COLOR_VALID",
+          "attributes": {},
+          "path": [
+            "control",
+            "text",
+            "color",
+            "valid"
+          ]
+        }
+      }
+    },
+    "placeholder": {
+      "color": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for placeholder text within inputs.",
+        "filePath": "src/tokens/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.500}"
+          },
+          "$type": "color",
+          "comment": "Used for placeholder text within inputs."
+        },
+        "name": "CONTROL_PLACEHOLDER_COLOR",
+        "attributes": {},
+        "path": [
+          "control",
+          "placeholder",
+          "color"
+        ]
+      }
+    },
+    "indicator": {
+      "color": {
+        "selected": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for checkbox and radio button state indicators.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used for checkbox and radio button state indicators."
+          },
+          "name": "CONTROL_INDICATOR_COLOR_SELECTED",
+          "attributes": {},
+          "path": [
+            "control",
+            "indicator",
+            "color",
+            "selected"
+          ]
+        },
+        "disabled": {
+          "value": "#737278",
+          "$type": "color",
+          "comment": "Used for disabled checkbox and radio button state indicators.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.500}",
+              "dark": "{color.neutral.400}"
+            },
+            "$type": "color",
+            "comment": "Used for disabled checkbox and radio button state indicators."
+          },
+          "name": "CONTROL_INDICATOR_COLOR_DISABLED",
+          "attributes": {},
+          "path": [
+            "control",
+            "indicator",
+            "color",
+            "disabled"
+          ]
+        }
+      }
+    }
+  },
   "feedback": {
     "background": {
       "color": {
@@ -9339,6 +9708,53 @@
       }
     }
   },
+  "focus-ring": {
+    "outer": {
+      "color": {
+        "value": "#1f75cb",
+        "$type": "color",
+        "comment": "Used for the outer color portion of the focus ring.",
+        "filePath": "src/tokens/focus-ring.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.blue.500}",
+            "dark": "{color.blue.400}"
+          },
+          "$type": "color",
+          "comment": "Used for the outer color portion of the focus ring."
+        },
+        "name": "FOCUS_RING_OUTER_COLOR",
+        "attributes": {},
+        "path": [
+          "focus-ring",
+          "outer",
+          "color"
+        ]
+      }
+    },
+    "inner": {
+      "color": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the inner neutral portion of the focus ring.",
+        "filePath": "src/tokens/focus-ring.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.default}",
+          "$type": "color",
+          "comment": "Used for the inner neutral portion of the focus ring."
+        },
+        "name": "FOCUS_RING_INNER_COLOR",
+        "attributes": {},
+        "path": [
+          "focus-ring",
+          "inner",
+          "color"
+        ]
+      }
+    }
+  },
   "icon": {
     "color": {
       "default": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -484,6 +484,7 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
+$gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
 $gl-feedback-danger-icon-color: $gl-color-red-300; // Used for an icon associated with danger or critical feedback.
 $gl-feedback-danger-background-color: $gl-color-red-900; // Used for a background associated with danger or critical feedback.
 $gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for an icon associated with warning feedback or confidential content.
@@ -498,6 +499,21 @@ $gl-feedback-link-color-strong: $gl-color-blue-700; // Used for a link on a stro
 $gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.
 $gl-feedback-background-color-strong: $gl-color-neutral-10; // Used for a background associated with feedback like a tooltip or toast message.
+$gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
+$gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbox and radio button state indicators.
+$gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
+$gl-control-text-color-valid: $gl-color-green-400; // Used for the helper text when the input is valid.
+$gl-control-text-color-error: $gl-color-red-400; // Used for the helper text when the input is invalid.
+$gl-control-border-color-error: $gl-color-red-400; // Used for invalid form control (input, textarea) border.
+$gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+$gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+$gl-control-border-color-hover: $gl-color-neutral-300; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+$gl-control-border-color-default: $gl-color-neutral-500; // Used for form control (input, radio button, checkbox, textarea) default border.
+$gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+$gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
@@ -541,4 +557,5 @@ $gl-action-icon-color-disabled: $gl-color-neutral-500; // Used for the icon of a
 $gl-action-text-color-disabled: $gl-color-neutral-400; // Used for the text of a disabled action.
 $gl-action-border-color-disabled: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-900; // Used for the background of a disabled action.
+$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

package/src/tokens/build/scss/_tokens.scss

@@ -484,6 +484,7 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
+$gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
 $gl-feedback-danger-icon-color: $gl-color-red-600; // Used for an icon associated with danger or critical feedback.
 $gl-feedback-danger-background-color: $gl-color-red-50; // Used for a background associated with danger or critical feedback.
 $gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for an icon associated with warning feedback or confidential content.
@@ -498,6 +499,21 @@ $gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a stro
 $gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.
 $gl-feedback-background-color-strong: $gl-color-neutral-950; // Used for a background associated with feedback like a tooltip or toast message.
+$gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
+$gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
+$gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
+$gl-control-text-color-valid: $gl-color-green-500; // Used for the helper text when the input is valid.
+$gl-control-text-color-error: $gl-color-red-500; // Used for the helper text when the input is invalid.
+$gl-control-border-color-error: $gl-color-red-500; // Used for invalid form control (input, textarea) border.
+$gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+$gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+$gl-control-border-color-hover: $gl-color-neutral-600; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+$gl-control-border-color-default: $gl-color-neutral-400; // Used for form control (input, radio button, checkbox, textarea) default border.
+$gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+$gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
@@ -541,4 +557,5 @@ $gl-action-icon-color-disabled: $gl-color-neutral-400; // Used for the icon of a
 $gl-action-text-color-disabled: $gl-color-neutral-500; // Used for the text of a disabled action.
 $gl-action-border-color-disabled: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-50; // Used for the background of a disabled action.
+$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -422,6 +422,21 @@ $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
+$gl-control-background-color-default: var(--gl-control-background-color-default);
+$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
+$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
+$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-border-color-default: var(--gl-control-border-color-default);
+$gl-control-border-color-hover: var(--gl-control-border-color-hover);
+$gl-control-border-color-focus: var(--gl-control-border-color-focus);
+$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
+$gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-text-color-error: var(--gl-control-text-color-error);
+$gl-control-text-color-valid: var(--gl-control-text-color-valid);
+$gl-control-placeholder-color: var(--gl-control-placeholder-color);
+$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
+$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
 $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
 $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
@@ -436,6 +451,8 @@ $gl-feedback-warning-background-color: var(--gl-feedback-warning-background-colo
 $gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
 $gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
 $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
+$gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
+$gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);
 $gl-icon-color-default: var(--gl-icon-color-default);
 $gl-icon-color-subtle: var(--gl-icon-color-subtle);
 $gl-icon-color-strong: var(--gl-icon-color-strong);

package/src/tokens/control.tokens.json

@@ -0,0 +1,144 @@
+{
+  "control": {
+    "background": {
+      "color": {
+        "default": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for form control (input, radio button, checkbox, textarea) default background."
+        },
+        "disabled": {
+          "$value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background."
+        },
+        "selected": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover."
+          }
+        }
+      }
+    },
+    "border": {
+      "color": {
+        "default": {
+          "$value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.500}"
+          },
+          "$type": "color",
+          "$description": "Used for form control (input, radio button, checkbox, textarea) default border."
+        },
+        "hover": {
+          "$value": {
+            "default": "{color.neutral.600}",
+            "dark": "{color.neutral.300}"
+          },
+          "$type": "color",
+          "$description": "Used for form control (input, radio button, checkbox, textarea) border on hover."
+        },
+        "focus": {
+          "$value": {
+            "default": "{color.neutral.900}",
+            "dark": "{color.neutral.50}"
+          },
+          "$type": "color",
+          "$description": "Used for form control (input, radio button, checkbox, textarea) border on focus."
+        },
+        "disabled": {
+          "$value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border."
+        },
+        "error": {
+          "$value": {
+            "default": "{color.red.500}",
+            "dark": "{color.red.400}"
+          },
+          "$type": "color",
+          "$description": "Used for invalid form control (input, textarea) border."
+        }
+      }
+    },
+    "text": {
+      "color": {
+        "error": {
+          "$value": {
+            "default": "{color.red.500}",
+            "dark": "{color.red.400}"
+          },
+          "$type": "color",
+          "$description": "Used for the helper text when the input is invalid."
+        },
+        "valid": {
+          "$value": {
+            "default": "{color.green.500}",
+            "dark": "{color.green.400}"
+          },
+          "$type": "color",
+          "$description": "Used for the helper text when the input is valid."
+        }
+      }
+    },
+    "placeholder": {
+      "color": {
+        "$value": {
+          "default": "{color.neutral.400}",
+          "dark": "{color.neutral.500}"
+        },
+        "$type": "color",
+        "$description": "Used for placeholder text within inputs."
+      }
+    },
+    "indicator": {
+      "color": {
+        "selected": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for checkbox and radio button state indicators."
+        },
+        "disabled": {
+          "$value": {
+            "default": "{color.neutral.500}",
+            "dark": "{color.neutral.400}"
+          },
+          "$type": "color",
+          "$description": "Used for disabled checkbox and radio button state indicators."
+        }
+      }
+    }
+  }
+}