@gooddata/sdk-ui-dashboard 11.48.0-alpha.0 → 11.48.0-alpha.1

package/styles/scss/filterBar.scss

@@ -12,15 +12,10 @@ $attribute-filter-drag-handle-left: 10px;
     position: relative;
 
     .show-all {
-        position: absolute;
-        bottom: -25px;
-        left: 50%;
-        display: block;
-        transform: translateX(-50%);
-
-        @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
-            z-index: zIndexes.$filterbar-show-all;
-        }
+        position: relative;
+        margin-top: -1px; // Move "Show all" button on top of filter border
+        display: flex;
+        justify-content: center;
     }
 
     .gd-filter-button-custom-icon-wrapper {
@@ -222,8 +217,6 @@ $attribute-filter-drag-handle-left: 10px;
 }
 
 .button-filter-bar-show-all {
-    position: relative;
-    top: -2px;
     height: 24px;
     padding: 5px 24px;
     border: variables.$nav-border;

package/styles/scss/kdaDialog.scss

@@ -388,6 +388,8 @@
                 justify-content: flex-end;
                 width: 100%;
 
+                --gd-icon-fill-color: var(--gd-palette-complementary-6);
+
                 .gd-ui-kit-button__text {
                     flex-grow: 1;
                     text-align: left;
@@ -948,7 +950,7 @@
     padding: 5px 10px;
     align-items: center;
     justify-content: space-between;
-    width: calc(100% - 20px);
+    width: 100%;
     height: 32px;
     cursor: pointer;
 

package/styles/scss/layout.scss

@@ -56,9 +56,9 @@ $gd-dashboards-section-description-color: var(
         &::after {
             content: "";
             position: absolute;
-            right: 10px;
-            bottom: 5px;
-            left: 10px;
+            right: 0;
+            bottom: -5px;
+            left: 0;
             height: 0;
             border-bottom: 1px dashed kit-variables.$gd-color-disabled;
         }
@@ -94,34 +94,31 @@ $gd-dashboards-section-description-color: var(
 }
 
 .gd-fluid-layout-row-header {
-    padding-right: 20px;
-    padding-left: 20px;
     text-align: center;
 
-    .gd-fluid-layout-row-header-container {
-        margin-top: 16px;
-    }
-
     @media #{kit-variables.$medium-up} {
-        padding-right: 0;
-        padding-left: 0;
         text-align: left;
     }
 
     .gd-row-header-view {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
         .title {
-            padding: 3px 5px;
+            padding: 0 5px 3px;
             white-space: pre-wrap;
             overflow-wrap: break-word;
         }
 
         .description {
-            padding: 4px 5px 2px;
+            padding: 0 5px 7px;
         }
     }
 
     .gd-row-header-title-wrapper {
         display: flex;
+        align-items: center;
 
         h2,
         h3 {
@@ -131,13 +128,18 @@ $gd-dashboards-section-description-color: var(
         &::before,
         &::after {
             content: "";
-            position: relative;
-            top: 16px;
             flex: 1 1 auto;
             height: 0;
             border-top: 1px solid $gd-dashboards-section-title-lineColor;
         }
 
+        // Move lines slightly down in edit mode.
+        &.gd-editable-label-container::before,
+        &.gd-editable-label-container::after {
+            position: relative;
+            top: 2px;
+        }
+
         &::before {
             margin-right: 20px;
         }
@@ -458,22 +460,10 @@ $gd-dashboards-section-description-color: var(
                 color: kit-variables.$gd-color-state-blank;
             }
         }
-
-        .gd-row-header-view {
-            .description {
-                padding: 4px 5px 15px; // add bottom padding after section description, same as fluid layout
-            }
-        }
     }
 
     .gd-fluid-layout-row-header-container--with-headers {
-        margin-top: 16px;
-    }
-
-    .gd-dashboard-nested-layout-content:not(.is-dragging-widget) {
-        .gd-fluid-layout-row-header-container--no-headers {
-            margin-top: 0;
-        }
+        margin-top: 4px; // Create a bit of space between editable header and top row separator (that appears on header edit or when dragging visualization/container)
     }
 
     .gd-fluidlayout-column-container {
@@ -487,6 +477,14 @@ $gd-dashboards-section-description-color: var(
     column-gap: 20px;
     grid-auto-rows: min-content; // do not render empty row for potential next grid item (chrome weird behavior)
     flex-grow: 1; // take the whole width of the page (parent flex container).
+
+    /**
+     * Row separators (by default invisible) in edit mode already create spaces between items so no need to enlarge it even more there.
+     * Use :where selector to not mess up with specificity.
+     */
+    :where(.sdk-view-mode-on) & {
+        row-gap: 20px;
+    }
 }
 
 .gd-grid-layout__container--nested {
@@ -498,6 +496,18 @@ $gd-dashboards-section-description-color: var(
     position: relative; // necessary to contain plugin overlay inside of the element
     display: grid;
     grid-template-columns: subgrid;
+
+    /**
+     * Doing grid gaps in edit mode is problematical because there are lots of exceptions (such as row separators, width/height resizers) where the gaps shouldn't be,
+     * so scope it only to view mode. Use :where selector to not mess up with specificity.
+     */
+    :where(.sdk-view-mode-on) & {
+        row-gap: 20px;
+
+        .gd-fluid-layout-row-header {
+            margin-bottom: -20px;
+        }
+    }
 }
 
 .gd-grid-layout__item {
@@ -510,6 +520,11 @@ $gd-dashboards-section-description-color: var(
         max-height: inherit;
         overflow: hidden;
     }
+
+    // Some grid items are empty (have no content), which creates unneeded gaps when doing `row-gap`. Remove such elements from the flow.
+    &:empty {
+        display: none;
+    }
 }
 
 // generate classes for grid span from 1 to 12
@@ -543,12 +558,10 @@ $gd-dashboards-section-description-color: var(
     .gd-grid-layout__section {
         column-gap: 6px;
         row-gap: 6px;
-    }
 
-    // Hidden items (isHidden=true) render with height:0 but still occupy a grid row,
-    // triggering row-gap before the next item. Hide them from grid flow entirely.
-    .gd-grid-layout__item:empty {
-        display: none;
+        .gd-fluid-layout-row-header {
+            margin-bottom: -6px;
+        }
     }
 
     // Nested layout containers have a JS-computed minHeight (inline style) based on gridHeight × row size.
@@ -577,8 +590,10 @@ $gd-dashboards-section-description-color: var(
     .gd-grid-layout {
         .gd-fluid-layout-row-header {
             .gd-row-header-view {
+                gap: 0;
+
                 .description {
-                    padding: 0;
+                    padding: 0 0 4px 0;
                     font-size: 12px;
                     // stylelint-disable-next-line max-nesting-depth
                     .gd-rich-text-content {

package/esm/assets/alert-bell-na.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 100 100"><path d="M9 18c.907 0 1.703-.332 2.344-.973a3.224 3.224 0 0 0 .973-2.344v-.088c.42-.023.84-.067 1.238-.089.398-.044.774-.088 1.128-.133 1.283-.154 2.1-.353 2.52-.574.421-.222.664-.443.753-.664.022-.088.044-.221.044-.42 0-.199-.088-.398-.31-.62a6.936 6.936 0 0 1-.995-1.26c-.31-.442-.575-.928-.818-1.415a15.829 15.829 0 0 1-.663-1.526c-.2-.53-.398-1.039-.597-1.548-.023-.088-.066-.154-.089-.22l-.862.862c.154.42.332.862.508 1.304.222.531.443 1.062.708 1.57.244.531.53 1.018.863 1.504.31.487.685.929 1.083 1.349a5.121 5.121 0 0 1-.752.265c-.376.11-.95.2-1.725.288-.73.088-1.548.155-2.454.199-.907.044-1.858.066-2.853.066-.641 0-1.238-.022-1.835-.044l-1.504 1.504c.066.774.376 1.46.951 2.034A3.224 3.224 0 0 0 9 18zm-2.211-3.361c.353.022.707.022 1.083.022h2.256c.376 0 .73-.022 1.083-.022v.044c0 .62-.22 1.15-.641 1.57-.42.42-.95.641-1.57.641-.62 0-1.15-.22-1.57-.641a2.15 2.15 0 0 1-.641-1.57zm-3.583-.288c-1.216-.154-2.012-.353-2.41-.575-.398-.22-.663-.442-.752-.663a1.687 1.687 0 0 1-.044-.42c0-.2.088-.398.31-.62.376-.375.707-.795.995-1.26.31-.442.575-.929.818-1.415s.464-.995.663-1.526c.2-.53.398-1.04.597-1.548.31-.774.597-1.526.885-2.233a8.142 8.142 0 0 1 1.061-1.88c.465-.663.995-1.15 1.614-1.46A4.454 4.454 0 0 1 8.978.266c.752 0 1.437.155 2.034.487.597.331 1.15.818 1.615 1.46.287.397.663 1.06.972 1.68L16.983.509l.818.818-16.474 16.54-.818-.818zm.973-.973 8.624-8.624c-.31-.663-.774-1.526-1.061-1.924a3.542 3.542 0 0 0-1.172-1.06c-.442-.243-.95-.376-1.57-.376-.62 0-1.128.133-1.57.376-.442.243-.818.62-1.15 1.061a7.962 7.962 0 0 0-.929 1.681c-.265.663-.575 1.393-.884 2.233-.2.509-.398 1.018-.597 1.57a19.597 19.597 0 0 1-.708 1.57c-.243.531-.53 1.018-.862 1.504a9.11 9.11 0 0 1-1.084 1.35c.133.065.376.154.752.264.288.089 1.283.31 2.211.376z" paint-order="stroke markers fill" transform="matrix(5.5 0 0 5.50001 -39.5 -39.5)" fill="#b0beca" stroke="#b0beca" stroke-width=".182"/></svg>

package/esm/assets/trash.svg

@@ -1 +0,0 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M15.457 2.707c.363 0 .677.132.94.396.264.263.396.577.396.94v.914c0 .293-.082.554-.246.782-.164.229-.381.39-.65.484v11.32c0 .375-.132.694-.396.958a1.305 1.305 0 0 1-.958.395h-9c-.363 0-.677-.131-.94-.395a1.305 1.305 0 0 1-.396-.958V6.223a1.36 1.36 0 0 1-.66-.484 1.277 1.277 0 0 1-.254-.782v-.914c0-.363.132-.677.395-.94.264-.264.583-.396.958-.396h3.147V2.25c0-.375.132-.694.395-.958.264-.264.583-.396.958-.396h1.811c.363 0 .677.132.94.396.264.264.396.583.396.958v.457h3.164Zm-6.75-.457v.457h2.69V2.25a.442.442 0 0 0-.132-.325.422.422 0 0 0-.308-.132h-1.81a.422.422 0 0 0-.308.132.442.442 0 0 0-.132.325ZM14.543 18a.442.442 0 0 0 .325-.132.442.442 0 0 0 .132-.325V6.293H5.104v11.25a.44.44 0 0 0 .131.325c.088.088.19.132.308.132h9Zm1.353-13.043v-.914a.422.422 0 0 0-.131-.308.422.422 0 0 0-.308-.131H4.647a.422.422 0 0 0-.308.131.422.422 0 0 0-.132.308v.914c0 .117.044.22.132.308a.42.42 0 0 0 .307.131h10.811c.117 0 .22-.043.308-.131a.422.422 0 0 0 .131-.308Zm-4.146 2.25c.129 0 .237.044.325.132a.42.42 0 0 1 .132.307v9a.442.442 0 0 1-.132.326.442.442 0 0 1-.325.132.442.442 0 0 1-.325-.132.442.442 0 0 1-.132-.326v-9c0-.117.044-.22.132-.307a.442.442 0 0 1 .325-.132Zm-3.396 0c.117 0 .22.044.307.132a.42.42 0 0 1 .132.307v9a.442.442 0 0 1-.132.326.422.422 0 0 1-.307.132.442.442 0 0 1-.326-.132.442.442 0 0 1-.132-.326v-9c0-.117.044-.22.132-.307a.442.442 0 0 1 .326-.132Z" fill="#FFF" stroke="#FFF" stroke-width=".3"/></svg>

package/styles/css/item-states-mixin.css

@@ -1,3 +0,0 @@
-
-
-/*# sourceMappingURL=item-states-mixin.css.map */

package/styles/css/item-states-mixin.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"item-states-mixin.css"}

package/styles/css/item-states.css

@@ -1,106 +0,0 @@
-.dash-item:hover .has-set-alert .dash-item-action-alert {
-  color: var(--gd-palette-primary-base, #14b2e2);
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
-}
-.dash-item .has-set-alert .dash-item-action-alert {
-  color: var(--gd-palette-primary-base, #14b2e2);
-  background-color: transparent;
-}
-.dash-item .has-set-alert .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .has-set-alert.is-alert-dialog {
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .has-set-alert.is-alert-dialog .dash-item-action-alert, .dash-item .has-set-alert.is-alert-dialog .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-dialog:hover .dash-item-action-alert, .dash-item .has-set-alert.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-highlighted .dash-item-action-alert, .dash-item .has-set-alert.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .has-set-alert.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-
-.dash-item:hover .is-alert-dialog .dash-item-action-alert {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-dialog .dash-item-action-alert {
-  color: transparent;
-  background-color: transparent;
-}
-.dash-item .is-alert-dialog .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-dialog.is-alert-dialog {
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-dialog.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-
-.dash-item:hover .is-alert-highlighted .dash-item-action-alert {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted .dash-item-action-alert {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted.is-alert-dialog {
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-
-.dash-item:hover .is-alert-triggered .dash-item-action-alert {
-  color: var(--gd-palette-warning-dimmed40, #8a6434);
-  background-color: var(--gd-palette-warning-base-t50, rgba(241, 134, 0, 0.5));
-}
-.dash-item .is-alert-triggered .dash-item-action-alert {
-  color: var(--gd-palette-warning-dimmed40, #8a6434);
-  background-color: var(--gd-palette-warning-base-t50, rgba(241, 134, 0, 0.5));
-}
-.dash-item .is-alert-triggered .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-warning-text-dimmed, #685945);
-  background-color: var(--gd-palette-warning-base, #f18600);
-}
-.dash-item .is-alert-triggered.is-alert-dialog {
-  border-color: var(--gd-palette-warning-base, #f18600);
-}
-.dash-item .is-alert-triggered.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-warning-text-dimmed, #685945);
-  background-color: var(--gd-palette-warning-base, #f18600);
-}
-
-.dash-item:hover .is-alert-broken .dash-item-action-alert {
-  color: var(--gd-palette-error-base, #e54d42);
-  background-color: var(--gd-palette-error-dimmed, #fcedec);
-}
-.dash-item .is-alert-broken .dash-item-action-alert {
-  color: var(--gd-palette-error-base, #e54d42);
-  background-color: transparent;
-}
-.dash-item .is-alert-broken .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-error-base, #e54d42);
-}
-.dash-item .is-alert-broken.is-alert-dialog {
-  border-color: var(--gd-palette-error-base, #e54d42);
-}
-.dash-item .is-alert-broken.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-error-base, #e54d42);
-}
-
-.dash-item .is-alert-evaluating .dash-item-action-alert {
-  color: var(--gd-palette-complementary-5, #b0beca);
-  background-color: var(--gd-palette-complementary-0, #fff);
-}
-
-/*# sourceMappingURL=item-states.css.map */

package/styles/css/item-states.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/item-states-mixin.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/item-states.scss"],"names":[],"mappings":"AAaY;EACI,OCiCU;EDhCV,kBCmCY;;AD9BhB;EACI,OC0BU;EDzBV,kBEZZ;;AFcY;EACI,OCeE;EDdF,kBCqBM;;ADjBd;EACI,cCgBU;;ADJF;EAEI,OCLN;EDMM,kBCCF;;;ADlCd;EACI,OC0BM;EDzBN,kBCgCU;;AD3Bd;EACI,OEFZ;EFGY,kBEFZ;;AFIY;EACI,OCeE;EDdF,kBCqBM;;ADjBd;EACI,cCgBU;;ADJF;EAEI,OCLN;EDMM,kBCCF;;;ADlCd;EACI,OC0BM;EDzBN,kBCgCU;;AD3Bd;EACI,OCmBM;EDlBN,kBCyBU;;ADvBV;EACI,OCeE;EDdF,kBCqBM;;ADjBd;EACI,cCgBU;;ADJF;EAEI,OCLN;EDMM,kBCCF;;;ADlCd;EACI,OCmFgB;EDlFhB,kBC0Ec;;ADrElB;EACI,OC4EgB;ED3EhB,kBCmEc;;ADjEd;EACI,OCoEK;EDnEL,kBCsDM;;ADlDd;EACI,cCiDU;;ADrCF;EAEI,OCgDH;ED/CG,kBCkCF;;;ADnEd;EACI,OCkDQ;EDjDR,kBCmDU;;AD9Cd;EACI,OC2CQ;ED1CR,kBE4BZ;;AF1BY;EACI,OCFH;EDGG,kBCsCI;;ADlCZ;EACI,cCiCQ;;ADrBA;EAEI,OCtBX;EDuBW,kBCkBJ;;;AD5CZ;EACI,OCMI;EDLJ,kBCCC","file":"item-states.css"}

package/styles/scss/item-states-mixin.scss

@@ -1,54 +0,0 @@
-// (C) 2007-2019 GoodData Corporation
-
-@mixin item-state(
-    $state-name,
-    $alert-normal-color,
-    $alert-normal-bg,
-    $alert-hover-color: null,
-    $alert-hover-bg: null,
-    $item-hover-alert-color: null,
-    $item-hover-alert-bg: null
-) {
-    .dash-item {
-        &:hover .#{$state-name} {
-            .dash-item-action-alert {
-                color: $item-hover-alert-color;
-                background-color: $item-hover-alert-bg;
-            }
-        }
-
-        .#{$state-name} {
-            .dash-item-action-alert {
-                color: $alert-normal-color;
-                background-color: $alert-normal-bg;
-
-                &:hover:not(.disabled) {
-                    color: $alert-hover-color;
-                    background-color: $alert-hover-bg;
-                }
-            }
-
-            &.is-alert-dialog {
-                border-color: $alert-hover-bg;
-            }
-
-            &.is-alert-dialog,
-            &.is-alert-highlighted {
-                &,
-                &:hover {
-                    // overwrite
-                    // stylelint-disable-next-line max-nesting-depth
-                    .dash-item-action-alert {
-                        // overwrite
-                        // stylelint-disable-next-line max-nesting-depth
-                        &,
-                        &:hover {
-                            color: $alert-hover-color;
-                            background-color: $alert-hover-bg;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

package/styles/scss/item-states.scss

@@ -1,65 +0,0 @@
-// (C) 2020 GoodData Corporation
-@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
-
-@use "item-states-mixin";
-
-// allow custom indentation
-// stylelint-disable indentation, at-rule-empty-line-before
-@include item-states-mixin.item-state(
-    "has-set-alert",
-    kit-variables.$gd-palette-primary-base,
-    transparent,
-    kit-variables.$gd-color-text-light,
-    kit-variables.$gd-palette-primary-base,
-    kit-variables.$gd-palette-primary-base,
-    kit-variables.$gd-palette-primary-dimmed
-);
-
-@include item-states-mixin.item-state(
-    "is-alert-dialog",
-    transparent,
-    transparent,
-    kit-variables.$gd-color-text-light,
-    kit-variables.$gd-palette-primary-base,
-    kit-variables.$gd-color-text-light,
-    kit-variables.$gd-palette-primary-base
-);
-
-@include item-states-mixin.item-state(
-    "is-alert-highlighted",
-    kit-variables.$gd-color-text-light,
-    kit-variables.$gd-palette-primary-base,
-    kit-variables.$gd-color-text-light,
-    kit-variables.$gd-palette-primary-base,
-    kit-variables.$gd-color-text-light,
-    kit-variables.$gd-palette-primary-base
-);
-
-@include item-states-mixin.item-state(
-    "is-alert-triggered",
-    kit-variables.$gd-color-warning-label-dimmed,
-    kit-variables.$gd-palette-warning-base-t50,
-    kit-variables.$gd-color-warning-label,
-    kit-variables.$gd-palette-warning-base,
-    kit-variables.$gd-color-warning-label-dimmed,
-    kit-variables.$gd-palette-warning-base-t50
-);
-
-@include item-states-mixin.item-state(
-    "is-alert-broken",
-    kit-variables.$gd-palette-error-base,
-    transparent,
-    kit-variables.$gd-color-white,
-    kit-variables.$gd-palette-error-base,
-    kit-variables.$gd-palette-error-base,
-    kit-variables.$gd-palette-error-dimmed
-);
-
-@include item-states-mixin.item-state(
-    "is-alert-evaluating",
-    kit-variables.$gd-color-disabled,
-    kit-variables.$gd-color-white
-);
-
-// allow custom indentation
-// stylelint-enable indentation, at-rule-empty-line-before