@gitlab/ui 89.5.0 → 89.7.0

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

@@ -469,7 +469,7 @@ $gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a
 $gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
-$gl-feedback-info-background-color: $gl-color-blue-900; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-950; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
@@ -494,6 +494,7 @@ $gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the ba
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -566,8 +567,9 @@ $gl-button-default-primary-background-color-hover: $gl-color-neutral-900; // Use
 $gl-button-default-primary-background-color-default: $gl-color-neutral-900; // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
-$gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
-$gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
+$gl-banner-promo-border-color: $gl-color-purple-800; // Used for the border of a promo banner.
+$gl-banner-promo-background-color: $gl-color-purple-950; // Used for the background of a promo banner.
+$gl-banner-intro-border-color: $gl-color-blue-800; // Used for the border of an info banner.
 $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.
@@ -660,6 +662,16 @@ $gl-avatar-fallback-text-color-purple: $gl-color-purple-200; // Purple text colo
 $gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
+$gl-alert-danger-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a danger alert.
+$gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
+$gl-alert-warning-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a warning alert.
+$gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert.
+$gl-alert-success-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a success alert.
+$gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert.
+$gl-alert-info-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of an info alert.
+$gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
+$gl-alert-neutral-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a neutral alert.
+$gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
@@ -764,6 +776,16 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
 $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
 $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
 $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
+$gl-alert-danger-background-color: $gl-background-color-subtle; // Used for the background color of a danger alert.
+$gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
+$gl-alert-warning-background-color: $gl-background-color-subtle; // Used for the background color of a warning alert.
+$gl-alert-warning-title-color: $gl-color-orange-300; // Used for the title color of a warning alert.
+$gl-alert-success-background-color: $gl-background-color-subtle; // Used for the background color of a success alert.
+$gl-alert-success-title-color: $gl-color-green-300; // Used for the title color of a success alert.
+$gl-alert-info-background-color: $gl-background-color-subtle; // Used for the background color of an info alert.
+$gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
+$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
+$gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

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

@@ -494,6 +494,7 @@ $gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the bac
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -566,8 +567,9 @@ $gl-button-default-primary-background-color-hover: $gl-color-neutral-50; // Used
 $gl-button-default-primary-background-color-default: $gl-color-neutral-0; // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // Used for the foreground of a default primary button in the default state.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
-$gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
-$gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
+$gl-banner-promo-border-color: $gl-color-purple-100; // Used for the border of a promo banner.
+$gl-banner-promo-background-color: $gl-color-purple-50; // Used for the background of a promo banner.
+$gl-banner-intro-border-color: $gl-color-blue-100; // Used for the border of an info banner.
 $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
@@ -660,6 +662,16 @@ $gl-avatar-fallback-text-color-purple: $gl-color-purple-800; // Purple text colo
 $gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
+$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
+$gl-alert-danger-border-top-color: $gl-color-alpha-0; // Used for the border color of a danger alert.
+$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
+$gl-alert-warning-border-top-color: $gl-color-alpha-0; // Used for the border color of a warning alert.
+$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
+$gl-alert-success-border-top-color: $gl-color-alpha-0; // Used for the border color of a success alert.
+$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
+$gl-alert-info-border-top-color: $gl-color-alpha-0; // Used for the border color of an info alert.
+$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
+$gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
@@ -764,6 +776,16 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
 $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
 $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
 $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
+$gl-alert-danger-background-color: $gl-feedback-danger-background-color; // Used for the background color of a danger alert.
+$gl-alert-danger-title-color: $gl-text-color-heading; // Used for the title color of a danger alert.
+$gl-alert-warning-background-color: $gl-feedback-warning-background-color; // Used for the background color of a warning alert.
+$gl-alert-warning-title-color: $gl-text-color-heading; // Used for the title color of a warning alert.
+$gl-alert-success-background-color: $gl-feedback-success-background-color; // Used for the background color of a success alert.
+$gl-alert-success-title-color: $gl-text-color-heading; // Used for the title color of a success alert.
+$gl-alert-info-background-color: $gl-feedback-info-background-color; // Used for the background color of an info alert.
+$gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
+$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
+$gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

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

@@ -301,6 +301,26 @@ $data-viz-orange-700: var(--data-viz-orange-700);
 $data-viz-orange-800: var(--data-viz-orange-800);
 $data-viz-orange-900: var(--data-viz-orange-900);
 $data-viz-orange-950: var(--data-viz-orange-950);
+$gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
+$gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
+$gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
+$gl-alert-neutral-border-bottom-color: var(--gl-alert-neutral-border-bottom-color);
+$gl-alert-info-title-color: var(--gl-alert-info-title-color);
+$gl-alert-info-background-color: var(--gl-alert-info-background-color);
+$gl-alert-info-border-top-color: var(--gl-alert-info-border-top-color);
+$gl-alert-info-border-bottom-color: var(--gl-alert-info-border-bottom-color);
+$gl-alert-success-title-color: var(--gl-alert-success-title-color);
+$gl-alert-success-background-color: var(--gl-alert-success-background-color);
+$gl-alert-success-border-top-color: var(--gl-alert-success-border-top-color);
+$gl-alert-success-border-bottom-color: var(--gl-alert-success-border-bottom-color);
+$gl-alert-warning-title-color: var(--gl-alert-warning-title-color);
+$gl-alert-warning-background-color: var(--gl-alert-warning-background-color);
+$gl-alert-warning-border-top-color: var(--gl-alert-warning-border-top-color);
+$gl-alert-warning-border-bottom-color: var(--gl-alert-warning-border-bottom-color);
+$gl-alert-danger-title-color: var(--gl-alert-danger-title-color);
+$gl-alert-danger-background-color: var(--gl-alert-danger-background-color);
+$gl-alert-danger-border-top-color: var(--gl-alert-danger-border-top-color);
+$gl-alert-danger-border-bottom-color: var(--gl-alert-danger-border-bottom-color);
 $gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
 $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
 $gl-avatar-fallback-text-color-red: var(--gl-avatar-fallback-text-color-red);
@@ -429,6 +449,7 @@ $gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-focus);
 $gl-badge-tier-icon-color-active: var(--gl-badge-tier-icon-color-active);
 $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
+$gl-banner-promo-border-color: var(--gl-banner-promo-border-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
 $gl-button-default-primary-foreground-color-default: var(--gl-button-default-primary-foreground-color-default);
 $gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover);
@@ -572,6 +593,7 @@ $gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
 $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-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);

package/src/tokens/contextual/alert.tokens.json

@@ -0,0 +1,224 @@
+{
+  "alert": {
+    "neutral": {
+      "title": {
+        "color": {
+          "$value": {
+            "default": "{text.color.heading}",
+            "dark": "{text.color.heading}"
+          },
+          "$type": "color",
+          "$description": "Used for the title color of a neutral alert."
+        }
+      },
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{feedback.neutral.background.color}",
+            "dark": "{background.color.subtle}"
+          },
+          "$type": "color",
+          "$description": "Used for the background color of a neutral alert."
+        }
+      },
+      "border": {
+        "top" : {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.neutral.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border center color of a neutral alert."
+          }
+        },
+        "bottom": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the border bottom color of a neutral alert."
+          }
+        }
+      }
+    },
+    "info": {
+      "title": {
+        "color": {
+          "$value": {
+            "default": "{text.color.heading}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the title color of an info alert."
+        }
+      },
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{feedback.info.background.color}",
+            "dark": "{background.color.subtle}"
+          },
+          "$type": "color",
+          "$description": "Used for the background color of an info alert."
+        }
+      },
+      "border": {
+        "top": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border color of an info alert."
+          }
+        },
+        "bottom": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the border bottom color of an info alert."
+          }
+        }
+      }
+    },
+    "success": {
+      "title": {
+        "color": {
+          "$value": {
+            "default": "{text.color.heading}",
+            "dark": "{color.green.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the title color of a success alert."
+        }
+      },
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{feedback.success.background.color}",
+            "dark": "{background.color.subtle}"
+          },
+          "$type": "color",
+          "$description": "Used for the background color of a success alert."
+        }
+      },
+      "border": {
+        "top": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.green.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border color of a success alert."
+          }
+        },
+        "bottom": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the border bottom color of a success alert."
+          }
+        }
+      }
+    },
+    "warning": {
+      "title": {
+        "color": {
+          "$value": {
+            "default": "{text.color.heading}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the title color of a warning alert."
+        }
+      },
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{feedback.warning.background.color}",
+            "dark": "{background.color.subtle}"
+          },
+          "$type": "color",
+          "$description": "Used for the background color of a warning alert."
+        }
+      },
+      "border": {
+        "top": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.orange.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border color of a warning alert."
+          }
+        },
+        "bottom": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the border bottom color of a warning alert."
+          }
+        }
+      }
+    },
+    "danger": {
+      "title": {
+        "color": {
+          "$value": {
+            "default": "{text.color.heading}",
+            "dark": "{color.red.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the title color of a danger alert."
+        }
+      },
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{feedback.danger.background.color}",
+            "dark": "{background.color.subtle}"
+          },
+          "$type": "color",
+          "$description": "Used for the background color of a danger alert."
+        }
+      },
+      "border": {
+        "top": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border color of a danger alert."
+          }
+        },
+        "bottom": {
+          "color": {
+            "$value": {
+              "default": "{color.alpha.0}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the border bottom color of a danger alert."
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/contextual/banner.tokens.json

@@ -4,11 +4,11 @@
       "border": {
         "color": {
           "$value": {
-            "default": "{color.blue.300}",
-            "dark": "{color.blue.600}"
+            "default": "{color.blue.100}",
+            "dark": "{color.blue.800}"
           },
           "$type": "color",
-          "$description": "Used to compliment the info banner."
+          "$description": "Used for the border of an info banner."
         }
       }
     },
@@ -16,11 +16,21 @@
       "background": {
         "color": {
           "$value": {
-            "default": "{color.neutral.10}",
-            "dark": "{color.neutral.900}"
+            "default": "{color.purple.50}",
+            "dark": "{color.purple.950}"
           },
           "$type": "color",
-          "$description": "Used as background for the default banner type."
+          "$description": "Used for the background of a promo banner."
+        }
+      },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.purple.100}",
+            "dark": "{color.purple.800}"
+          },
+          "$type": "color",
+          "$description": "Used for the border of a promo banner."
         }
       }
     }

package/src/tokens/contextual/tabs.tokens.json

@@ -0,0 +1,18 @@
+{
+  "tab": {
+    "selected": {
+      "indicator": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the selected indicator of a tab."
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/feedback.tokens.json

@@ -79,7 +79,7 @@
         "color": {
           "$value": {
             "default": "{color.blue.50}",
-            "dark": "{color.blue.900}"
+            "dark": "{color.blue.950}"
           },
           "$type": "color",
           "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."