@gitlab/ui 111.0.0 → 111.1.1

package/dist/tokens/js/tokens.js

@@ -624,6 +624,13 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#626168';
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#737278';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde';
+export const GL_CHART_AXIS_POINTER_COLOR = '#626168';
+export const GL_CHART_AXIS_LINE_COLOR = '#bfbfc3';
+export const GL_CHART_AXIS_TEXT_COLOR = '#626168';
+export const GL_CHART_THRESHOLD_AREA_COLOR = 'rgba(221,43,14,0.1)';
+export const GL_CHART_THRESHOLD_LINE_COLOR = '#dd2b0e';
+export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(05, 05, 06, 0.08)';
+export const GL_CHART_ZOOM_HANDLE_COLOR = '#626168';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff';

package/dist/tokens/json/tokens.dark.json

@@ -13350,6 +13350,177 @@
       }
     }
   },
+  "chart": {
+    "axis": {
+      "pointer": {
+        "color": {
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used in charts for the color of the reference line and axis value under mouse pointer.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{icon.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the color of the reference line and axis value under mouse pointer."
+          },
+          "name": "CHART_AXIS_POINTER_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "pointer",
+            "color"
+          ]
+        }
+      },
+      "line": {
+        "color": {
+          "$value": "#4c4b51",
+          "$type": "color",
+          "$description": "Used in charts for axis line color.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.neutral.200}",
+              "dark": "{color.neutral.700}"
+            },
+            "$type": "color",
+            "$description": "Used in charts for axis line color."
+          },
+          "name": "CHART_AXIS_LINE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "line",
+            "color"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used in charts for the text color of axis titles and labels.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{text.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the text color of axis titles and labels."
+          },
+          "name": "CHART_AXIS_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "text",
+            "color"
+          ]
+        }
+      }
+    },
+    "threshold": {
+      "area": {
+        "color": {
+          "$value": "rgba(221,43,14,0.1)",
+          "$type": "color",
+          "$description": "Used in charts to delineate a threshold area in a chart.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(221,43,14,0.1)",
+            "$type": "color",
+            "$description": "Used in charts to delineate a threshold area in a chart."
+          },
+          "name": "CHART_THRESHOLD_AREA_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "threshold",
+            "area",
+            "color"
+          ]
+        }
+      },
+      "line": {
+        "color": {
+          "$value": "#c91c00",
+          "$type": "color",
+          "$description": "Used in charts to divide a threshold area in a chart from other data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.600}"
+            },
+            "$type": "color",
+            "$description": "Used in charts to divide a threshold area in a chart from other data."
+          },
+          "name": "CHART_THRESHOLD_LINE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "threshold",
+            "line",
+            "color"
+          ]
+        }
+      }
+    },
+    "zoom": {
+      "filler": {
+        "color": {
+          "$value": "rgba(255, 255, 255, 0.16)",
+          "$type": "color",
+          "$description": "Used in charts for the overlay color when zooming in on a specific area of data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.8}",
+              "dark": "{color.alpha.light.16}"
+            },
+            "$type": "color",
+            "$description": "Used in charts for the overlay color when zooming in on a specific area of data."
+          },
+          "name": "CHART_ZOOM_FILLER_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "zoom",
+            "filler",
+            "color"
+          ]
+        }
+      },
+      "handle": {
+        "color": {
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used in charts for the handle color when zooming in on a specific area of data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{icon.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the handle color when zooming in on a specific area of data."
+          },
+          "name": "CHART_ZOOM_HANDLE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "zoom",
+            "handle",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "datepicker": {
     "background": {
       "color": {
@@ -13452,13 +13623,17 @@
     "divider": {
       "color": {
         "$value": "#3a383f",
+        "$type": "color",
+        "$description": "Used for the divider of a dropdown.",
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
           "$value": {
             "default": "{border.color.default}",
             "dark": "{border.color.subtle}"
-          }
+          },
+          "$type": "color",
+          "$description": "Used for the divider of a dropdown."
         },
         "name": "DROPDOWN_DIVIDER_COLOR",
         "attributes": {},

package/dist/tokens/json/tokens.json

@@ -13350,6 +13350,177 @@
       }
     }
   },
+  "chart": {
+    "axis": {
+      "pointer": {
+        "color": {
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used in charts for the color of the reference line and axis value under mouse pointer.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{icon.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the color of the reference line and axis value under mouse pointer."
+          },
+          "name": "CHART_AXIS_POINTER_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "pointer",
+            "color"
+          ]
+        }
+      },
+      "line": {
+        "color": {
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used in charts for axis line color.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.neutral.200}",
+              "dark": "{color.neutral.700}"
+            },
+            "$type": "color",
+            "$description": "Used in charts for axis line color."
+          },
+          "name": "CHART_AXIS_LINE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "line",
+            "color"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used in charts for the text color of axis titles and labels.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{text.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the text color of axis titles and labels."
+          },
+          "name": "CHART_AXIS_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "text",
+            "color"
+          ]
+        }
+      }
+    },
+    "threshold": {
+      "area": {
+        "color": {
+          "$value": "rgba(221,43,14,0.1)",
+          "$type": "color",
+          "$description": "Used in charts to delineate a threshold area in a chart.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(221,43,14,0.1)",
+            "$type": "color",
+            "$description": "Used in charts to delineate a threshold area in a chart."
+          },
+          "name": "CHART_THRESHOLD_AREA_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "threshold",
+            "area",
+            "color"
+          ]
+        }
+      },
+      "line": {
+        "color": {
+          "$value": "#dd2b0e",
+          "$type": "color",
+          "$description": "Used in charts to divide a threshold area in a chart from other data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.600}"
+            },
+            "$type": "color",
+            "$description": "Used in charts to divide a threshold area in a chart from other data."
+          },
+          "name": "CHART_THRESHOLD_LINE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "threshold",
+            "line",
+            "color"
+          ]
+        }
+      }
+    },
+    "zoom": {
+      "filler": {
+        "color": {
+          "$value": "rgba(05, 05, 06, 0.08)",
+          "$type": "color",
+          "$description": "Used in charts for the overlay color when zooming in on a specific area of data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.8}",
+              "dark": "{color.alpha.light.16}"
+            },
+            "$type": "color",
+            "$description": "Used in charts for the overlay color when zooming in on a specific area of data."
+          },
+          "name": "CHART_ZOOM_FILLER_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "zoom",
+            "filler",
+            "color"
+          ]
+        }
+      },
+      "handle": {
+        "color": {
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used in charts for the handle color when zooming in on a specific area of data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{icon.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the handle color when zooming in on a specific area of data."
+          },
+          "name": "CHART_ZOOM_HANDLE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "zoom",
+            "handle",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "datepicker": {
     "background": {
       "color": {
@@ -13452,13 +13623,17 @@
     "divider": {
       "color": {
         "$value": "#dcdcde",
+        "$type": "color",
+        "$description": "Used for the divider of a dropdown.",
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
           "$value": {
             "default": "{border.color.default}",
             "dark": "{border.color.subtle}"
-          }
+          },
+          "$type": "color",
+          "$description": "Used for the divider of a dropdown."
         },
         "name": "DROPDOWN_DIVIDER_COLOR",
         "attributes": {},

package/dist/tokens/scss/_tokens.dark.scss

@@ -242,6 +242,7 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -748,6 +749,9 @@ $gl-button-selected-border-color-active: $gl-color-alpha-0; // Used for the bord
 $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
+$gl-chart-axis-line-color: $gl-color-neutral-700; // Used in charts for axis line color.
+$gl-chart-threshold-line-color: $gl-color-red-600; // Used in charts to divide a threshold area in a chart from other data.
+$gl-chart-zoom-filler-color: $gl-color-alpha-light-16; // Used in charts for the overlay color when zooming in on a specific area of data.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
@@ -951,10 +955,11 @@ $gl-button-selected-foreground-color-default: $gl-color-neutral-900; // Used for
 $gl-button-selected-background-color-hover: $gl-color-neutral-200; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-color-neutral-400; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
-$gl-dropdown-divider-color: $gl-border-color-subtle;
+$gl-dropdown-divider-color: $gl-border-color-subtle; // Used for the divider of a dropdown.
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
 $gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
@@ -1025,6 +1030,8 @@ $gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for t
 $gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
+$gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
+$gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.

package/dist/tokens/scss/_tokens.scss

@@ -242,6 +242,7 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -748,6 +749,9 @@ $gl-button-selected-border-color-active: $gl-color-neutral-600; // Used for the
 $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
+$gl-chart-axis-line-color: $gl-color-neutral-200; // Used in charts for axis line color.
+$gl-chart-threshold-line-color: $gl-color-red-500; // Used in charts to divide a threshold area in a chart from other data.
+$gl-chart-zoom-filler-color: $gl-color-alpha-dark-8; // Used in charts for the overlay color when zooming in on a specific area of data.
 $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
@@ -951,10 +955,11 @@ $gl-button-selected-foreground-color-default: $gl-button-default-primary-foregro
 $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
-$gl-dropdown-divider-color: $gl-border-color-default;
+$gl-dropdown-divider-color: $gl-border-color-default; // Used for the divider of a dropdown.
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
 $gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
@@ -1025,6 +1030,8 @@ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foregroun
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
+$gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
+$gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -624,6 +624,13 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
 $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
 $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
+$gl-chart-axis-pointer-color: var(--gl-chart-axis-pointer-color);
+$gl-chart-axis-line-color: var(--gl-chart-axis-line-color);
+$gl-chart-axis-text-color: var(--gl-chart-axis-text-color);
+$gl-chart-threshold-area-color: var(--gl-chart-threshold-area-color);
+$gl-chart-threshold-line-color: var(--gl-chart-threshold-line-color);
+$gl-chart-zoom-filler-color: var(--gl-chart-zoom-filler-color);
+$gl-chart-zoom-handle-color: var(--gl-chart-zoom-handle-color);
 $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);