@gitlab/ui 115.7.0 → 115.8.0

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -8724,6 +8724,160 @@
         "color"
       ],
       "cssWithValue": "var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))"
+    },
+    "control": {
+      "default": {
+        "key": "{control.background.color.default}",
+        "$value": "#fff",
+        "$type": "color",
+        "$description": "Used for form control (input, radio button, checkbox, textarea) default background.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.background.color.default}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "default"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-default, var(--gl-color-neutral-0, #fff))"
+      },
+      "disabled": {
+        "key": "{control.background.color.disabled}",
+        "$value": "#fbfafd",
+        "$type": "color",
+        "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.background.color.disabled}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "disabled"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))"
+      },
+      "concatenation": {
+        "key": "{control.background.color.concatenation}",
+        "$value": "#fbfafd",
+        "$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"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.background.color.concatenation}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_CONCATENATION",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "concatenation"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-concatenation, var(--gl-color-neutral-10, #fbfafd))"
+      },
+      "readonly": {
+        "key": "{control.background.color.readonly}",
+        "$value": "rgba(05, 05, 06, 0.02)",
+        "$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"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.background.color.readonly}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_READONLY",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "readonly"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-readonly, var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02)))"
+      }
     }
   },
   "border": {
@@ -16947,6 +17101,116 @@
         "color"
       ],
       "cssWithValue": "var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))"
+    },
+    "control": {
+      "default": {
+        "key": "{control.border.color.default}",
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for form control (input, radio button, checkbox, textarea) default border.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.border.color.default}"
+        },
+        "name": "CONTROL_BORDER_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "control",
+          "border",
+          "color",
+          "default"
+        ],
+        "cssWithValue": "var(--gl-control-border-color-default, var(--gl-color-neutral-400, #89888d))"
+      },
+      "disabled": {
+        "key": "{control.border.color.disabled}",
+        "$value": "#dcdcde",
+        "$type": "color",
+        "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.border.color.disabled}"
+        },
+        "name": "CONTROL_BORDER_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "control",
+          "border",
+          "color",
+          "disabled"
+        ],
+        "cssWithValue": "var(--gl-control-border-color-disabled, var(--gl-color-neutral-100, #dcdcde))"
+      },
+      "error": {
+        "key": "{control.border.color.error}",
+        "$value": "#dd2b0e",
+        "$type": "color",
+        "$description": "Used for invalid form control (input, textarea) border.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$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"
+            ]
+          },
+          "key": "{control.border.color.error}"
+        },
+        "name": "CONTROL_BORDER_COLOR_ERROR",
+        "attributes": {},
+        "path": [
+          "control",
+          "border",
+          "color",
+          "error"
+        ],
+        "cssWithValue": "var(--gl-control-border-color-error, var(--gl-color-red-500, #dd2b0e))"
+      }
     }
   },
   "fill": {
@@ -34523,6 +34787,106 @@
         "tertiary"
       ],
       "cssWithValue": "var(--gl-text-tertiary, #89888d)"
+    },
+    "control": {
+      "placeholder": {
+        "key": "{control.placeholder.color}",
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for placeholder text within inputs.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{text.color.disabled}",
+          "$type": "color",
+          "$description": "Used for placeholder text within inputs.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{control.placeholder.color}"
+        },
+        "name": "CONTROL_PLACEHOLDER_COLOR",
+        "attributes": {},
+        "path": [
+          "control",
+          "placeholder",
+          "color"
+        ],
+        "cssWithValue": "var(--gl-control-placeholder-color, var(--gl-text-color-disabled, #89888d))"
+      },
+      "error": {
+        "key": "{control.text.color.error}",
+        "$value": "#c02f12",
+        "$type": "color",
+        "$description": "Used for the helper text when the input is invalid.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{text.color.danger}",
+          "$type": "color",
+          "$description": "Used for the helper text when the input is invalid.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{control.text.color.error}"
+        },
+        "name": "CONTROL_TEXT_COLOR_ERROR",
+        "attributes": {},
+        "path": [
+          "control",
+          "text",
+          "color",
+          "error"
+        ],
+        "cssWithValue": "var(--gl-control-text-color-error, var(--gl-text-color-danger, #c02f12))"
+      },
+      "valid": {
+        "key": "{control.text.color.valid}",
+        "$value": "#2f7549",
+        "$type": "color",
+        "$description": "Used for the helper text when the input is valid.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{text.color.success}",
+          "$type": "color",
+          "$description": "Used for the helper text when the input is valid.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{control.text.color.valid}"
+        },
+        "name": "CONTROL_TEXT_COLOR_VALID",
+        "attributes": {},
+        "path": [
+          "control",
+          "text",
+          "color",
+          "valid"
+        ],
+        "cssWithValue": "var(--gl-control-text-color-valid, var(--gl-text-color-success, #2f7549))"
+      }
     }
   },
   "outline": {

package/src/tokens/build/tailwind/tokens.cjs

@@ -376,6 +376,14 @@ const backgroundColor = {
   ...statusBackgroundColors,
   ...feedbackBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
+  control: {
+    default: 'var(--gl-control-background-color-default, var(--gl-color-neutral-0, #fff))',
+    disabled: 'var(--gl-control-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+    concatenation:
+      'var(--gl-control-background-color-concatenation, var(--gl-color-neutral-10, #fbfafd))',
+    readonly:
+      'var(--gl-control-background-color-readonly, var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02)))',
+  },
 };
 
 const borderColor = {
@@ -383,6 +391,11 @@ const borderColor = {
   ...borderColors,
   dropdown: 'var(--gl-dropdown-border-color, var(--gl-border-color-strong, #bfbfc3))',
   'dropdown-divider': 'var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))',
+  control: {
+    default: 'var(--gl-control-border-color-default, var(--gl-color-neutral-400, #89888d))',
+    disabled: 'var(--gl-control-border-color-disabled, var(--gl-color-neutral-100, #dcdcde))',
+    error: 'var(--gl-control-border-color-error, var(--gl-color-red-500, #dd2b0e))',
+  },
 };
 
 const outlineColor = {
@@ -406,6 +419,11 @@ const textColor = {
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',
+  control: {
+    placeholder: 'var(--gl-control-placeholder-color, var(--gl-text-color-disabled, #89888d))',
+    error: 'var(--gl-control-text-color-error, var(--gl-text-color-danger, #c02f12))',
+    valid: 'var(--gl-control-text-color-valid, var(--gl-text-color-success, #2f7549))',
+  },
 };
 
 module.exports = {

package/tailwind.defaults.js

@@ -73,6 +73,15 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
         },
       },
     },
+    '.bg-control': {
+      'background-color': 'var(--gl-control-background-color-default)',
+      '&:disabled': {
+        'background-color': 'var(--gl-control-background-color-disabled)',
+      },
+      '&:readonly': {
+        'background-color': 'var(--gl-control-background-color-readonly)',
+      },
+    },
     '.border': {
       'border-style': 'solid',
       'border-color': 'var(--gl-border-color-default)',
@@ -93,6 +102,18 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
       'border-left-style': 'solid',
       'border-left-color': 'var(--gl-border-color-default)',
     },
+    '.border-control': {
+      'border-color': 'var(--gl-control-border-color-default)',
+      '&:hover': {
+        'border-color': 'var(--gl-control-border-color-hover)',
+      },
+      '&:focus': {
+        'border-color': 'var(--gl-control-border-color-focus)',
+      },
+      '&:disabled': {
+        'border-color': 'var(--gl-control-border-color-disabled)',
+      },
+    },
     '.str-truncated': {
       display: 'inline-block',
       overflow: 'hidden',