@gitlab/ui 95.2.1 → 95.4.0

package/src/tokens/build/scss/_tokens.dark.scss

@@ -744,12 +744,12 @@ $gl-background-color-strong: $gl-color-neutral-800; // Used to make the backgrou
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
 $gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
-$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
-$gl-action-strong-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of a strong neutral action in the active state.
-$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-200; // Used for the background of a strong neutral action in the hover state.
-$gl-action-strong-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-background-color-active: $gl-color-neutral-500; // Used for the background of a strong neutral action in the active state.
+$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used for the background of a strong neutral action in the hover state.
+$gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Used for the background of a strong neutral action in the default state.
 $gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
-$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
+$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a strong confirm action in the default state.
 $gl-action-strong-confirm-background-color-active: $gl-color-blue-200; // Used for the background of a strong confirm action in the active state.
 $gl-action-strong-confirm-background-color-hover: $gl-color-blue-300; // Used for the background of a strong confirm action in the hover state.
 $gl-action-strong-confirm-background-color-default: $gl-color-blue-400; // Used for the background of a strong confirm action in the default state.
@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
+$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
+$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
+$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch 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.
 $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-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.

package/src/tokens/build/scss/_tokens.scss

@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
+$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
+$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
+$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch 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.
 $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-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -682,6 +682,15 @@ $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
 $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
 $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
 $gl-tab-selected-indicator-color-default: var(--gl-tab-selected-indicator-color-default);
+$gl-toggle-switch-icon-color-unchecked-default: var(--gl-toggle-switch-icon-color-unchecked-default);
+$gl-toggle-switch-icon-color-unchecked-hover: var(--gl-toggle-switch-icon-color-unchecked-hover);
+$gl-toggle-switch-icon-color-unchecked-focus: var(--gl-toggle-switch-icon-color-unchecked-focus);
+$gl-toggle-switch-icon-color-unchecked-active: var(--gl-toggle-switch-icon-color-unchecked-active);
+$gl-toggle-switch-icon-color-checked-default: var(--gl-toggle-switch-icon-color-checked-default);
+$gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-checked-hover);
+$gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
+$gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
+$gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);

package/src/tokens/contextual/toggle.tokens.json

@@ -0,0 +1,59 @@
+{
+  "toggle": {
+    "switch": {
+      "icon": {
+        "color": {
+          "unchecked": {
+            "default": {
+              "$value": "{action.strong.neutral.background.color.default}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.neutral.background.color.hover}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.neutral.background.color.focus}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.neutral.background.color.active}",
+              "$type": "color",
+              "$description": "Used for the icon color of an unchecked toggle switch in the active state."
+            }
+          },
+          "checked": {
+            "default": {
+              "$value": "{action.strong.confirm.background.color.default}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.confirm.background.color.hover}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.confirm.background.color.focus}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.confirm.background.color.active}",
+              "$type": "color",
+              "$description": "Used for the icon color of a checked toggle switch in the active state."
+            }
+          },
+          "disabled": {
+            "$value": "{action.disabled.background.color}",
+            "$type": "color",
+            "$description": "Used for the icon color of a disabled toggle switch."
+          }
+        }
+      }
+    }
+  }
+}

package/translations.js

@@ -74,6 +74,7 @@ export default {
   'GlPagination.labelNextPage': 'Go to next page',
   'GlPagination.labelPage': 'Go to page %{page}',
   'GlPagination.labelPrevPage': 'Go to previous page',
+  'GlPagination.nav': 'Pagination',
   'GlPagination.nextText': 'Next',
   'GlPagination.prevText': 'Previous',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',