@gitlab/ui 85.9.0 → 85.10.0

package/src/tokens/action.tokens.json

@@ -313,6 +313,283 @@
           }
         }
       }
+    },
+    "confirm": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined confirm (positive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.50}",
+              "dark": "{color.blue.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined confirm (positive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.blue.50}",
+              "dark": "{color.blue.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined confirm (positive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.100}",
+              "dark": "{color.blue.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined confirm (positive) action in the active state."
+          },
+          "subtle": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle confirm (positive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.blue.50}",
+                "dark": "{color.blue.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle confirm (positive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.blue.50}",
+                "dark": "{color.blue.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle confirm (positive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.blue.100}",
+                "dark": "{color.blue.800}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle confirm (positive) action in the active state."
+            }
+          },
+          "strong": {
+            "default": {
+              "$value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong confirm (positive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.blue.600}",
+                "dark": "{color.blue.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong confirm (positive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.blue.600}",
+                "dark": "{color.blue.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong confirm (positive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong confirm (positive) action in the active state."
+            },
+            "selected": {
+              "$value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong confirm (positive) action when in a selected or current state."
+            }
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined confirm (positive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined confirm (positive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined confirm (positive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.900}",
+              "dark": "{color.blue.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined confirm (positive) action in the active state."
+          },
+          "strong": {
+            "default": {
+              "$value": {
+                "default": "{color.blue.600}",
+                "dark": "{color.blue.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong confirm (positive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.blue.800}",
+                "dark": "{color.blue.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong confirm (positive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.blue.800}",
+                "dark": "{color.blue.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong confirm (positive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.blue.900}",
+                "dark": "{color.blue.50}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong confirm (positive) action in the active state."
+            },
+            "selected": {
+              "$value": {
+                "default": "{color.blue.600}",
+                "dark": "{color.blue.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong confirm (positive) action when in a selected or current state."
+            }
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a confirm (positive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a confirm (positive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a confirm (positive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.900}",
+              "dark": "{color.blue.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a confirm (positive) action in the active state."
+          },
+          "strong": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the text on a solid, strong confirm (positive) action background."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a confirm (positive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a confirm (positive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a confirm (positive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.blue.900}",
+              "dark": "{color.blue.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a confirm (positive) action in the active state."
+          },
+          "strong": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon on a solid, strong confirm (positive) action background."
+          }
+        }
+      }
     }
   }
 }

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

@@ -516,6 +516,8 @@
   --gl-control-background-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /* Used for the animated shimmer effect in a skeleton loader. */
+  --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /* Used for the skeleton loader background color. */
   --gl-popover-background-color: var(--gl-color-neutral-0); /* Used for the background color of popover. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
@@ -536,6 +538,38 @@
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
+  --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong confirm (positive) action background. */
+  --gl-action-confirm-icon-color-active: var(--gl-color-blue-900); /* Used for the icon of a confirm (positive) action in the active state. */
+  --gl-action-confirm-icon-color-focus: var(--gl-color-blue-700); /* Used for the icon of a confirm (positive) action in the focus state. */
+  --gl-action-confirm-icon-color-hover: var(--gl-color-blue-700); /* Used for the icon of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-icon-color-default: var(--gl-color-blue-500); /* Used for the icon of a confirm (positive) action in the default state. */
+  --gl-action-confirm-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong confirm (positive) action background. */
+  --gl-action-confirm-text-color-active: var(--gl-color-blue-900); /* Used for the text of a confirm (positive) action in the active state. */
+  --gl-action-confirm-text-color-focus: var(--gl-color-blue-700); /* Used for the text of a confirm (positive) action in the focus state. */
+  --gl-action-confirm-text-color-hover: var(--gl-color-blue-700); /* Used for the text of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-text-color-default: var(--gl-color-blue-500); /* Used for the text of a confirm (positive) action in the default state. */
+  --gl-action-confirm-border-color-strong-selected: var(--gl-color-blue-600); /* Used for the border of a solid, strong confirm (positive) action when in a selected or current state. */
+  --gl-action-confirm-border-color-strong-active: var(--gl-color-blue-900); /* Used for the border of a solid, strong confirm (positive) action in the active state. */
+  --gl-action-confirm-border-color-strong-focus: var(--gl-color-blue-800); /* Used for the border of a solid, strong confirm (positive) action in the focus state. */
+  --gl-action-confirm-border-color-strong-hover: var(--gl-color-blue-800); /* Used for the border of a solid, strong confirm (positive) action in the hover state. */
+  --gl-action-confirm-border-color-strong-default: var(--gl-color-blue-600); /* Used for the border of a solid, strong confirm (positive) action in the default state. */
+  --gl-action-confirm-border-color-active: var(--gl-color-blue-900); /* Used for the border of an outlined confirm (positive) action in the active state. */
+  --gl-action-confirm-border-color-focus: var(--gl-color-blue-700); /* Used for the border of an outlined confirm (positive) action in the focus state. */
+  --gl-action-confirm-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an outlined confirm (positive) action in the hover state. */
+  --gl-action-confirm-border-color-default: var(--gl-color-blue-500); /* Used for the border of an outlined confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-strong-selected: var(--gl-color-blue-500); /* Used for the background of a solid, strong confirm (positive) action when in a selected or current state. */
+  --gl-action-confirm-background-color-strong-active: var(--gl-color-blue-700); /* Used for the background of a solid, strong confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-strong-focus: var(--gl-color-blue-600); /* Used for the background of a solid, strong confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-strong-hover: var(--gl-color-blue-600); /* Used for the background of a solid, strong confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-strong-default: var(--gl-color-blue-500); /* Used for the background of a solid, strong confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-subtle-active: var(--gl-color-blue-100); /* Used for the background of a borderless, subtle confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-subtle-focus: var(--gl-color-blue-50); /* Used for the background of a borderless, subtle confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-subtle-hover: var(--gl-color-blue-50); /* Used for the background of a borderless, subtle confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-active: var(--gl-color-blue-100); /* Used for the background of an outlined confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-focus: var(--gl-color-blue-50); /* Used for the background of an outlined confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-hover: var(--gl-color-blue-50); /* Used for the background of an outlined confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined confirm (positive) action in the default state. */
   --gl-action-neutral-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong neutral action background. */
   --gl-action-neutral-icon-color-active: var(--gl-color-neutral-900); /* Used for the icon of outlined and borderless neutral actions in the active state. */
   --gl-action-neutral-icon-color-focus: var(--gl-color-neutral-700); /* Used for the icon of outlined and borderless neutral actions in the focus state. */

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

@@ -516,6 +516,8 @@
   --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-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /* Used for the animated shimmer effect in a skeleton loader. */
+  --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /* Used for the skeleton loader background color. */
   --gl-popover-background-color: var(--gl-color-neutral-900); /* Used for the background color of popover. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-700); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
@@ -536,6 +538,38 @@
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
+  --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong confirm (positive) action background. */
+  --gl-action-confirm-icon-color-active: var(--gl-color-blue-50); /* Used for the icon of a confirm (positive) action in the active state. */
+  --gl-action-confirm-icon-color-focus: var(--gl-color-blue-200); /* Used for the icon of a confirm (positive) action in the focus state. */
+  --gl-action-confirm-icon-color-hover: var(--gl-color-blue-200); /* Used for the icon of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of a confirm (positive) action in the default state. */
+  --gl-action-confirm-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong confirm (positive) action background. */
+  --gl-action-confirm-text-color-active: var(--gl-color-blue-50); /* Used for the text of a confirm (positive) action in the active state. */
+  --gl-action-confirm-text-color-focus: var(--gl-color-blue-200); /* Used for the text of a confirm (positive) action in the focus state. */
+  --gl-action-confirm-text-color-hover: var(--gl-color-blue-200); /* Used for the text of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-text-color-default: var(--gl-color-blue-400); /* Used for the text of a confirm (positive) action in the default state. */
+  --gl-action-confirm-border-color-strong-selected: var(--gl-color-blue-300); /* Used for the border of a solid, strong confirm (positive) action when in a selected or current state. */
+  --gl-action-confirm-border-color-strong-active: var(--gl-color-blue-50); /* Used for the border of a solid, strong confirm (positive) action in the active state. */
+  --gl-action-confirm-border-color-strong-focus: var(--gl-color-blue-100); /* Used for the border of a solid, strong confirm (positive) action in the focus state. */
+  --gl-action-confirm-border-color-strong-hover: var(--gl-color-blue-100); /* Used for the border of a solid, strong confirm (positive) action in the hover state. */
+  --gl-action-confirm-border-color-strong-default: var(--gl-color-blue-300); /* Used for the border of a solid, strong confirm (positive) action in the default state. */
+  --gl-action-confirm-border-color-active: var(--gl-color-blue-50); /* Used for the border of an outlined confirm (positive) action in the active state. */
+  --gl-action-confirm-border-color-focus: var(--gl-color-blue-200); /* Used for the border of an outlined confirm (positive) action in the focus state. */
+  --gl-action-confirm-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an outlined confirm (positive) action in the hover state. */
+  --gl-action-confirm-border-color-default: var(--gl-color-blue-400); /* Used for the border of an outlined confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-strong-selected: var(--gl-color-blue-400); /* Used for the background of a solid, strong confirm (positive) action when in a selected or current state. */
+  --gl-action-confirm-background-color-strong-active: var(--gl-color-blue-200); /* Used for the background of a solid, strong confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-strong-focus: var(--gl-color-blue-300); /* Used for the background of a solid, strong confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-strong-hover: var(--gl-color-blue-300); /* Used for the background of a solid, strong confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-strong-default: var(--gl-color-blue-400); /* Used for the background of a solid, strong confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-subtle-active: var(--gl-color-blue-800); /* Used for the background of a borderless, subtle confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-subtle-focus: var(--gl-color-blue-900); /* Used for the background of a borderless, subtle confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-subtle-hover: var(--gl-color-blue-900); /* Used for the background of a borderless, subtle confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-active: var(--gl-color-blue-800); /* Used for the background of an outlined confirm (positive) action in the active state. */
+  --gl-action-confirm-background-color-focus: var(--gl-color-blue-900); /* Used for the background of an outlined confirm (positive) action in the focus state. */
+  --gl-action-confirm-background-color-hover: var(--gl-color-blue-900); /* Used for the background of an outlined confirm (positive) action in the hover state. */
+  --gl-action-confirm-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined confirm (positive) action in the default state. */
   --gl-action-neutral-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong neutral action background. */
   --gl-action-neutral-icon-color-active: var(--gl-color-neutral-50); /* Used for the icon of outlined and borderless neutral actions in the active state. */
   --gl-action-neutral-icon-color-focus: var(--gl-color-neutral-200); /* Used for the icon of outlined and borderless neutral actions in the focus state. */

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

@@ -38,6 +38,38 @@ export const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#bfbfc3'; // Used for the ico
 export const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#bfbfc3'; // Used for the icon of outlined and borderless neutral actions in the focus state.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#ececef'; // Used for the icon of outlined and borderless neutral actions in the active state.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong neutral action background.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of an outlined confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = '#033464'; // Used for the background of an outlined confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = '#033464'; // Used for the background of an outlined confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#064787'; // Used for the background of an outlined confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_HOVER = '#033464'; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_FOCUS = '#033464'; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#064787'; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_DEFAULT = '#428fdc'; // Used for the background of a solid, strong confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_HOVER = '#63a6e9'; // Used for the background of a solid, strong confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_FOCUS = '#63a6e9'; // Used for the background of a solid, strong confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_ACTIVE = '#9dc7f1'; // Used for the background of a solid, strong confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_SELECTED = '#428fdc'; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = '#428fdc'; // Used for the border of an outlined confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an outlined confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = '#9dc7f1'; // Used for the border of an outlined confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = '#e9f3fc'; // Used for the border of an outlined confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_DEFAULT = '#63a6e9'; // Used for the border of a solid, strong confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_HOVER = '#cbe2f9'; // Used for the border of a solid, strong confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_FOCUS = '#cbe2f9'; // Used for the border of a solid, strong confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_ACTIVE = '#e9f3fc'; // Used for the border of a solid, strong confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_SELECTED = '#63a6e9'; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_DEFAULT = '#428fdc'; // Used for the text of a confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_HOVER = '#9dc7f1'; // Used for the text of a confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_FOCUS = '#9dc7f1'; // Used for the text of a confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of a confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_STRONG = '#333238'; // Used for the text on a solid, strong confirm (positive) action background.
+export const GL_ACTION_CONFIRM_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of a confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#e9f3fc'; // Used for the icon of a confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong confirm (positive) action background.
 export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
 export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
@@ -433,6 +465,8 @@ export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#333238'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.
 export const GL_POPOVER_BACKGROUND_COLOR = '#333238'; // Used for the background color of popover.
+export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#434248'; // Used for the skeleton loader background color.
+export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#535158'; // Used for the animated shimmer effect in a skeleton loader.
 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.

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

@@ -38,6 +38,38 @@ export const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#535158'; // Used for the ico
 export const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#535158'; // Used for the icon of outlined and borderless neutral actions in the focus state.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#333238'; // Used for the icon of outlined and borderless neutral actions in the active state.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong neutral action background.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = '#e9f3fc'; // Used for the background of an outlined confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = '#e9f3fc'; // Used for the background of an outlined confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#cbe2f9'; // Used for the background of an outlined confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_HOVER = '#e9f3fc'; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_FOCUS = '#e9f3fc'; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#cbe2f9'; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_DEFAULT = '#1f75cb'; // Used for the background of a solid, strong confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_HOVER = '#1068bf'; // Used for the background of a solid, strong confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_FOCUS = '#1068bf'; // Used for the background of a solid, strong confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_ACTIVE = '#0b5cad'; // Used for the background of a solid, strong confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_SELECTED = '#1f75cb'; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = '#1f75cb'; // Used for the border of an outlined confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an outlined confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = '#0b5cad'; // Used for the border of an outlined confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = '#033464'; // Used for the border of an outlined confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_DEFAULT = '#1068bf'; // Used for the border of a solid, strong confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_HOVER = '#064787'; // Used for the border of a solid, strong confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_FOCUS = '#064787'; // Used for the border of a solid, strong confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_ACTIVE = '#033464'; // Used for the border of a solid, strong confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_SELECTED = '#1068bf'; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_DEFAULT = '#1f75cb'; // Used for the text of a confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_HOVER = '#0b5cad'; // Used for the text of a confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_FOCUS = '#0b5cad'; // Used for the text of a confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_ACTIVE = '#033464'; // Used for the text of a confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong confirm (positive) action background.
+export const GL_ACTION_CONFIRM_ICON_COLOR_DEFAULT = '#1f75cb'; // Used for the icon of a confirm (positive) action in the default state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#0b5cad'; // Used for the icon of a confirm (positive) action in the hover state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#0b5cad'; // Used for the icon of a confirm (positive) action in the focus state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#033464'; // Used for the icon of a confirm (positive) action in the active state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong confirm (positive) action background.
 export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
 export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
@@ -433,6 +465,8 @@ export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
 export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
+export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
+export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
 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.