@gitlab/ui 78.5.0 → 78.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.5.0",
+  "version": "78.6.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -99,10 +99,10 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.4.0",
+    "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.91.0",
+    "@gitlab/svgs": "3.93.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -64,14 +64,18 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   }
 
   &.light {
-    --gl-broadcast-message-bg-color: #{$gray-300};
-    --gl-broadcast-message-border-color: #{$gray-500};
+    --gl-broadcast-message-bg-color: #{$gray-50};
+    --gl-broadcast-message-border-color: #{$gray-100};
   }
 
   &.banner {
     @include gl-text-contrast-light;
     background-color: var(--gl-broadcast-message-bg-color);
     box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);
+
+    &.light {
+      @include gl-text-black-normal;
+    }
   }
 
   &.notification {

package/src/components/charts/stacked_column/stacked_column.stories.js

@@ -6,6 +6,12 @@ import {
 } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
 import { columnOptions } from '../../../utils/constants';
+import {
+  DATA_VIZ_ORANGE_600,
+  DATA_VIZ_AQUA_500,
+  DATA_VIZ_GREEN_600,
+  DATA_VIZ_MAGENTA_500,
+} from '../../../../dist/tokens/js/tokens';
 import readme from './stacked_column.md';
 
 const template = `
@@ -21,6 +27,7 @@ const template = `
     :secondary-data="secondaryData"
     :secondary-data-title="secondaryDataTitle"
     :height="height"
+    :custom-palette="customPalette"
   />
 `;
 
@@ -38,6 +45,7 @@ const generateProps = ({
   secondaryData = [],
   secondaryDataTitle = '',
   height = null,
+  customPalette,
 } = {}) => ({
   bars,
   lines,
@@ -50,6 +58,7 @@ const generateProps = ({
   secondaryDataTitle,
   secondaryData,
   height,
+  customPalette,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -103,6 +112,11 @@ SecondaryYAxisLine.args = generateProps({
   secondaryDataTitle: mockSecondaryDataTitle,
 });
 
+export const WithCustomColorPalette = Template.bind({});
+WithCustomColorPalette.args = generateProps({
+  customPalette: [DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500],
+});
+
 export default {
   title: 'charts/stacked-column-chart',
   component: GlStackedColumnChart,

package/src/scss/utilities.scss

@@ -3336,6 +3336,18 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
+.gl-lg-display-grid {
+  @include gl-media-breakpoint-up(lg) {
+    display: grid;
+  }
+}
+
+.gl-lg-display-grid\! {
+  @include gl-media-breakpoint-up(lg) {
+    display: grid !important;
+  }
+}
+
 .gl-sm-display-table-cell {
   @include gl-media-breakpoint-up(sm) {
   display: table-cell;

package/src/scss/utility-mixins/display.scss

@@ -163,6 +163,12 @@
   }
 }
 
+@mixin gl-lg-display-grid {
+  @include gl-media-breakpoint-up(lg) {
+    display: grid;
+  }
+}
+
 @mixin gl-sm-display-table-cell {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-table-cell;