@gitlab/ui

{ "control": { "background": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.alpha.dark.40}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) default background.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "disabled": { "$value": { "default": "{color.neutral.10}", "dark": "{color.alpha.light.4}" }, "$type": "color", "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "concatenation": { "$value": { "default": "{color.neutral.10}", "dark": "{color.alpha.light.4}" }, "$type": "color", "$description": "Used for the background of static content that prepends or appends a text input.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "readonly": { "$value": { "default": "{color.alpha.dark.2}", "dark": "{color.alpha.light.8}" }, "$type": "color", "$description": "Used for the background of static content that prepends or appends a text input.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "selected": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } } } } }, "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.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "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.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "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.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "disabled": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "error": { "$value": { "default": "{color.red.500}", "dark": "{color.red.300}" }, "$type": "color", "$description": "Used for invalid form control (input, textarea) border.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "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) border.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } }, "focus": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.", "$extensions": { "com.figma.scope": [ "STROKE_COLOR" ] } } } } }, "text": { "color": { "error": { "$value": "{text.color.danger}", "$type": "color", "$description": "Used for the helper text when the input is invalid.", "$extensions": { "com.figma.scope": [ "TEXT_FILL" ] } }, "valid": { "$value": "{text.color.success}", "$type": "color", "$description": "Used for the helper text when the input is valid.", "$extensions": { "com.figma.scope": [ "TEXT_FILL" ] } } } }, "placeholder": { "color": { "$value": "{text.color.disabled}", "$type": "color", "$description": "Used for placeholder text within inputs.", "$extensions": { "com.figma.scope": [ "TEXT_FILL" ] } } }, "indicator": { "color": { "selected": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for checkbox and radio button state indicators.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "disabled": { "$value": { "default": "{color.neutral.500}", "dark": "{color.neutral.400}" }, "$type": "color", "$description": "Used for disabled checkbox and radio button state indicators.", "$extensions": { "com.figma.scope": [ "FRAME_FILL", "SHAPE_FILL" ] } } } } } }