@gitlab/ui 85.2.1 → 85.3.0

package/src/tokens/build/css/tokens.dark.css

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

package/src/tokens/build/js/tokens.dark.js

@@ -422,6 +422,21 @@ export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.
+export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for form control (input, radio button, checkbox, textarea) default background.
+export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#1f1e24'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#737278'; // Used for form control (input, radio button, checkbox, textarea) default border.
+export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+export const GL_CONTROL_BORDER_COLOR_DISABLED = '#434248'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_ERROR = '#ec5941'; // Used for invalid form control (input, textarea) border.
+export const GL_CONTROL_TEXT_COLOR_ERROR = '#ec5941'; // Used for the helper text when the input is invalid.
+export const GL_CONTROL_TEXT_COLOR_VALID = '#2da160'; // Used for the helper text when the input is valid.
+export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278'; // Used for placeholder text within inputs.
+export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#333238'; // Used for checkbox and radio button state indicators.
+export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d'; // Used for disabled checkbox and radio button state indicators.
 export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#fbfafd'; // Used for a background associated with feedback like a tooltip or toast message.
 export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#333238'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_ICON_COLOR_STRONG = '#333238'; // Used for an icon on a strong feedback background.
@@ -436,6 +451,8 @@ export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#5c2900'; // Used for a bac
 export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530'; // Used for an icon associated with warning feedback or confidential content.
 export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#660e00'; // Used for a background associated with danger or critical feedback.
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f57f6c'; // Used for an icon associated with danger or critical feedback.
+export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc'; // Used for the outer color portion of the focus ring.
+export const GL_FOCUS_RING_INNER_COLOR = '#1f1e24'; // Used for the inner neutral portion of the focus ring.
 export const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.
 export const GL_ICON_COLOR_SUBTLE = '#a4a3a8'; // Used for a static or decorational icon. Can be paired with subtle text.
 export const GL_ICON_COLOR_STRONG = '#fbfafd'; // Used for an icon with the highest contrast.

package/src/tokens/build/js/tokens.js

@@ -422,6 +422,21 @@ export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
+export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
+export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#89888d'; // Used for form control (input, radio button, checkbox, textarea) default border.
+export const GL_CONTROL_BORDER_COLOR_HOVER = '#626168'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+export const GL_CONTROL_BORDER_COLOR_FOCUS = '#333238'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+export const GL_CONTROL_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form control (input, textarea) border.
+export const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
+export const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
+export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.
+export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff'; // Used for checkbox and radio button state indicators.
+export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278'; // Used for disabled checkbox and radio button state indicators.
 export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#1f1e24'; // Used for a background associated with feedback like a tooltip or toast message.
 export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#fff'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_ICON_COLOR_STRONG = '#fff'; // Used for an icon on a strong feedback background.
@@ -436,6 +451,8 @@ export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for a bac
 export const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; // Used for an icon associated with warning feedback or confidential content.
 export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for a background associated with danger or critical feedback.
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for an icon associated with danger or critical feedback.
+export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb'; // Used for the outer color portion of the focus ring.
+export const GL_FOCUS_RING_INNER_COLOR = '#fff'; // Used for the inner neutral portion of the focus ring.
 export const GL_ICON_COLOR_DEFAULT = '#535158'; // Used for the default icon color. Can be paired with default text.
 export const GL_ICON_COLOR_SUBTLE = '#737278'; // Used for a static or decorational icon. Can be paired with subtle text.
 export const GL_ICON_COLOR_STRONG = '#333238'; // Used for an icon with the highest contrast.

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

@@ -8969,6 +8969,375 @@
       }
     }
   },
+  "control": {
+    "background": {
+      "color": {
+        "default": {
+          "value": "#333238",
+          "$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": "#1f1e24",
+          "$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": "#428fdc",
+            "$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": "#9dc7f1",
+            "$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": "#9dc7f1",
+            "$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": "#737278",
+          "$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": "#a4a3a8",
+          "$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": "#ececef",
+          "$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": "#434248",
+          "$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": "#ec5941",
+          "$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": "#ec5941",
+          "$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": "#2da160",
+          "$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": "#737278",
+        "$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": "#333238",
+          "$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": "#89888d",
+          "$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": "#428fdc",
+        "$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": "#1f1e24",
+        "$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": {