@gitlab/ui 115.7.0 → 115.8.0

package/dist/tokens/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/dist/tokens/tailwind/tokens.cjs

@@ -44,6 +44,12 @@
     ...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  = {
@@ -51,6 +57,11 @@
     ...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 = {
@@ -74,6 +85,11 @@
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.7.0",
+  "version": "115.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -138,7 +138,7 @@
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "esbuild": "^0.25.6",
+    "esbuild": "^0.25.7",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",