@rossigee/clarity-ui 18.2.1-fixed

package/data/datagrid/_mixins.datagrid.scss

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../popover/dropdown/menu-mixins.clarity';
+@use '../variables.tables' as tables-variables;
+@use 'variables.datagrid' as datagrid-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@mixin clr-datagrid-header-bg {
+  background-color: tables-variables.$clr-thead-bgcolor;
+}
+@mixin clr-datagrid-popover-shadows {
+  box-shadow: datagrid-variables.$clr-datagrid-popovers-box-shadow;
+}
+@mixin datagrid-action-overflow-appearance {
+  position: relative;
+  background: datagrid-variables.$clr-datagrid-popover-bg-color;
+  padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-m;
+  margin-left: tokens.$cds-global-space-4;
+  border-style: solid;
+  border-width: tokens.$cds-alias-object-border-width-100;
+  border-color: datagrid-variables.$clr-datagrid-popover-border-color;
+
+  @include clr-datagrid-popover-shadows;
+
+  border-radius: density.$clr-base-border-radius-s;
+  font-weight: normal;
+  white-space: nowrap;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+
+    @include mixins.equilateral(0);
+
+    margin-top: calc(-1 * datagrid-variables.$clr-datagrid-action-arrow-size);
+    border-top: datagrid-variables.$clr-datagrid-action-arrow-size solid transparent;
+    border-bottom: datagrid-variables.$clr-datagrid-action-arrow-size solid transparent;
+    border-right: datagrid-variables.$clr-datagrid-action-arrow-size solid
+      datagrid-variables.$clr-datagrid-popover-border-color;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+
+    @include mixins.equilateral(0);
+
+    margin-top: calc(-1 * datagrid-variables.$clr-datagrid-action-arrow-size + tokens.$cds-global-space-1);
+    border-top: calc(datagrid-variables.$clr-datagrid-action-arrow-size - tokens.$cds-global-space-1) solid transparent;
+    border-bottom: calc(datagrid-variables.$clr-datagrid-action-arrow-size - tokens.$cds-global-space-1) solid
+      transparent;
+    border-right: calc(datagrid-variables.$clr-datagrid-action-arrow-size - tokens.$cds-global-space-1) solid
+      datagrid-variables.$clr-datagrid-popover-bg-color;
+  }
+
+  .action-item {
+    @include menu-mixins.generate-dropdown-item();
+    @include menu-mixins.generate-dropdown-item-height();
+  }
+}
+@mixin datagrid-action-button-styles(
+  $height: tables-variables.$clr-table-cell-height,
+  $columnWidth: datagrid-variables.$clr-datagrid-fixed-column-size,
+  $iconSize: datagrid-variables.$clr-datagrid-icon-size
+) {
+  // Calculates how much padding to set on top/bottom and left/right by dividing the height by the icon size
+  $verticalPadding: calc(($height - $iconSize) / 2);
+  $horizontalPadding: calc(($columnWidth - $iconSize) / 2);
+
+  cursor: pointer;
+  width: 100%;
+  height: $height;
+  padding: $verticalPadding $horizontalPadding;
+  display: inline-flex;
+}
+@mixin datagrid-column-separator($position: right, $selector: 'after', $alignTop: true) {
+  &#{':' + $selector} {
+    content: '';
+    width: datagrid-variables.$clr-datagrid-column-separator-width;
+    height: datagrid-variables.$clr-datagrid-column-separator-height;
+    position: absolute;
+    #{$position}: 0;
+    background-color: tables-variables.$clr-table-border-color;
+
+    @if $alignTop == true {
+      top: tokens.$cds-global-space-3;
+    } @else {
+      align-self: center;
+    }
+  }
+}

package/data/datagrid/_properties.datagrid.scss

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use 'variables.datagrid' as datagrid-variables;
+@use '../../popover/dropdown/variables.dropdown' as dropdown-variables;
+@use '../variables.tables' as tables-variables;
+@use '../../forms/styles/variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('datagrid.properties') {
+  @include mixins.root-or-host() {
+    --clr-datagrid-column-separator-expandby: #{tokens.$cds-global-space-6};
+    --clr-datagrid-action-arrow-size: #{tokens.$cds-global-space-4};
+    --clr-datagrid-cell-outline-offset: calc(-1 * #{tokens.$cds-global-space-2});
+    --clr-datagrid-compact-margin-top: #{tokens.$cds-global-space-5};
+    --clr-datagrid-compact-action-bar-offset: #{mixins.baselinePx(20)};
+
+    &,
+    [clr-density] {
+      --clr-datagrid-margin-top: #{density.$clr-base-vertical-offset-l};
+      --clr-datagrid-action-bar-offset: #{density.$clr-base-vertical-offset-2xl};
+      --clr-datagrid-column-toggle-padding: 0 #{density.$clr-base-horizontal-offset-m};
+      --clr-datagrid-detail-pane-content-padding: #{density.$clr-base-vertical-offset-xl}
+        #{density.$clr-base-horizontal-offset-xl};
+      --clr-datagrid-detail-pane-close-icon-size: #{density.$clr-base-icon-size-l};
+      --clr-datagrid-filter-toggle-size: #{density.$clr-base-icon-size-s};
+      --clr-datagrid-footer-pagination-gap: #{density.$clr-base-gap-m};
+      --clr-datagrid-fixed-column-size: calc(
+        #{density.$clr-base-icon-size-s} + (#{density.$clr-base-horizontal-offset-xl} * 2)
+      );
+      --clr-datagrid-icon-size: #{density.$clr-base-icon-size-s};
+    }
+
+    &,
+    [cds-theme] {
+      --clr-datagrid-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-datagrid-default-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-datagrid-icon-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-datagrid-row-hover-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-datagrid-row-active-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-datagrid-action-toggle-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-datagrid-pagination-btn-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-datagrid-pagination-btn-disabled-color: #{tokens.$cds-alias-status-disabled};
+      --clr-datagrid-pagination-input-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-datagrid-pagination-input-border-focus-color: #{forms-variables.$clr-forms-focused-color};
+      --clr-datagrid-popover-bg-color: #{tokens.$cds-alias-object-container-background};
+      --clr-datagrid-popover-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-datagrid-popover-font-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-datagrid-row-selected: #{tokens.$cds-alias-typography-color-500};
+      --clr-datagrid-row-selected-background-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-datagrid-row-selected-active-background-color: var(
+        --cds-alias-object-interaction-background-selected-active
+      );
+      --clr-datagrid-row-selected-hover-background-color: var(--cds-alias-object-interaction-background-selected-hover);
+      --clr-datagrid-column-switch-header-font-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-datagrid-column-switch-header-font-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-datagrid-column-switch-header-font-hover-active: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-datagrid-detail-caret-icon-open-bg-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-datagrid-detail-caret-icon-open-icon-color: #{tokens.$cds-alias-object-interaction-background};
+      --clr-datagrid-loading-background: var(--cds-alias-object-container-backdrop-background);
+      --clr-datagrid-column-toggle-border-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-datagrid-column-toggle-fill-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-datagrid-column-toggle-text-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-datagrid-column-toggle-disabled-color: var(--clr-btn-default-disabled-color);
+      --clr-datagrid-column-toggle-border-hover-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-datagrid-column-toggle-fill-hover-color: #{tokens.$cds-alias-object-interaction-background};
+      --clr-datagrid-column-toggle-text-hover-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-datagrid-column-toggle-border-active-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-datagrid-column-toggle-fill-active-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-datagrid-column-toggle-text-active-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-datagrid-detail-body-text-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-datagrid-detail-header-title-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-datagrid-detail-pane-bg-color: #{tokens.$cds-alias-object-container-background};
+      --clr-datagrid-detail-pane-open-row-bg-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-datagrid-detail-pane-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-datagrid-placeholder-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-datagrid-popovers-box-shadow: #{tokens.$cds-alias-object-shadow-100};
+      --clr-datagrid-column-separator-height: calc(100% - #{tokens.$cds-global-space-5});
+      --clr-datagrid-column-separator-width: #{tokens.$cds-global-space-1};
+      --clr-datagrid-column-resize-handler-color: #{tokens.$cds-alias-object-interaction-border-color};
+    }
+  }
+}

package/data/datagrid/_variables.datagrid.scss

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../variables.tables' as tables-variables;
+@use '../../progress/spinner/variables.spinner' as spinner-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+// Usage: ../data/datagrid/_datagrid.clarity.scss
+$clr-datagrid-margin-top: var(--clr-datagrid-margin-top);
+$clr-datagrid-compact-margin-top: var(--clr-datagrid-compact-margin-top);
+$clr-datagrid-action-bar-offset: var(--clr-datagrid-action-bar-offset);
+$clr-datagrid-compact-action-bar-offset: var(--clr-datagrid-compact-action-bar-offset);
+$clr-datagrid-font-color: var(--clr-datagrid-font-color) !default;
+$clr-datagrid-default-border-color: var(--clr-datagrid-default-border-color) !default;
+$clr-datagrid-icon-color: var(--clr-datagrid-icon-color) !default;
+$clr-datagrid-row-hover-color: var(--clr-datagrid-row-hover-color) !default;
+$clr-datagrid-row-active-color: var(--clr-datagrid-row-active-color) !default;
+
+$clr-datagrid-action-toggle-color: var(--clr-datagrid-action-toggle-color) !default;
+$clr-datagrid-pagination-btn-color: var(--clr-datagrid-pagination-btn-color) !default;
+$clr-datagrid-pagination-btn-disabled-color: var(--clr-datagrid-pagination-btn-disabled-color) !default;
+$clr-datagrid-pagination-input-border-color: var(--clr-datagrid-pagination-input-border-color) !default;
+$clr-datagrid-pagination-input-border-focus-color: var(--clr-datagrid-pagination-input-border-focus-color) !default;
+$clr-datagrid-popover-bg-color: var(--clr-datagrid-popover-bg-color) !default;
+$clr-datagrid-popover-border-color: var(--clr-datagrid-popover-border-color) !default;
+$clr-datagrid-popover-font-color: var(--clr-datagrid-popover-font-color) !default;
+
+$clr-datagrid-row-selected: var(--clr-datagrid-row-selected) !default;
+$clr-datagrid-row-selected-background-color: var(--clr-datagrid-row-selected-background-color) !default;
+$clr-datagrid-row-selected-active-background-color: var(--clr-datagrid-row-selected-active-background-color) !default;
+$clr-datagrid-row-selected-hover-background-color: var(--clr-datagrid-row-selected-hover-background-color) !default;
+
+$clr-datagrid-column-switch-header-font-color: var(--clr-datagrid-column-switch-header-font-color) !default;
+$clr-datagrid-column-switch-header-font-hover-color: var(--clr-datagrid-column-switch-header-font-hover-color) !default;
+$clr-datagrid-column-switch-header-font-active-color: var(
+  --clr-datagrid-column-switch-header-font-active-color
+) !default;
+
+$clr-datagrid-detail-caret-icon-open-bg-color: var(--clr-datagrid-detail-caret-icon-open-bg-color) !default;
+$clr-datagrid-detail-caret-icon-open-icon-color: var(--clr-datagrid-detail-caret-icon-open-icon-color) !default;
+
+$clr-datagrid-loading-background: var(--clr-datagrid-loading-background) !default;
+
+$clr-datagrid-column-toggle-padding: var(--clr-datagrid-column-toggle-padding) !default;
+$clr-datagrid-column-toggle-border-color: var(--clr-datagrid-column-toggle-border-color) !default;
+$clr-datagrid-column-toggle-fill-color: var(--clr-datagrid-column-toggle-fill-color) !default;
+$clr-datagrid-column-toggle-text-color: var(--clr-datagrid-column-toggle-text-color) !default;
+$clr-datagrid-column-toggle-disabled-color: var(--clr-datagrid-column-toggle-disabled-color) !default;
+$clr-datagrid-column-toggle-border-hover-color: var(--clr-datagrid-column-toggle-border-hover-color) !default;
+$clr-datagrid-column-toggle-fill-hover-color: var(--clr-datagrid-column-toggle-fill-hover-color) !default;
+$clr-datagrid-column-toggle-text-hover-color: var(--clr-datagrid-column-toggle-text-hover-color) !default;
+
+$clr-datagrid-column-toggle-border-active-color: var(--clr-datagrid-column-toggle-border-active-color) !default;
+$clr-datagrid-column-toggle-fill-active-color: var(--clr-datagrid-column-toggle-fill-active-color) !default;
+$clr-datagrid-column-toggle-text-active-color: var(--clr-datagrid-column-toggle-text-active-color) !default;
+
+$clr-datagrid-detail-pane-content-padding: var(--clr-datagrid-detail-pane-content-padding) !default;
+$clr-datagrid-detail-pane-close-icon-size: var(--clr-datagrid-detail-pane-close-icon-size) !default;
+$clr-datagrid-detail-body-text-color: var(--clr-datagrid-detail-body-text-color) !default;
+$clr-datagrid-detail-header-title-color: var(--clr-datagrid-detail-header-title-color) !default;
+$clr-datagrid-detail-pane-bg-color: var(--clr-datagrid-detail-pane-bg-color) !default;
+$clr-datagrid-detail-pane-open-row-bg-color: var(--clr-datagrid-detail-pane-open-row-bg-color) !default;
+$clr-datagrid-detail-pane-border-color: var(--clr-datagrid-detail-pane-border-color) !default;
+
+$clr-datagrid-placeholder-background-color: var(--clr-datagrid-placeholder-background-color) !default;
+$clr-datagrid-popovers-box-shadow: var(--clr-datagrid-popovers-box-shadow) !default;
+$clr-datagrid-column-separator-height: var(--clr-datagrid-column-separator-height) !default;
+$clr-datagrid-column-separator-width: var(--clr-datagrid-column-separator-width) !default;
+$clr-datagrid-column-resize-handler-color: var(--clr-datagrid-column-resize-handler-color) !default;
+$clr-datagrid-filter-toggle-size: var(--clr-datagrid-filter-toggle-size) !default;
+
+$clr-datagrid-footer-pagination-gap: var(--clr-datagrid-footer-pagination-gap) !default;
+$clr-datagrid-fixed-column-size: var(--clr-datagrid-fixed-column-size) !default;
+
+$clr-datagrid-cell-outline-offset: var(--clr-datagrid-cell-outline-offset);
+$clr-datagrid-pagination-btn-disabled-opacity: 1 !default; // Leaving for backwards compatibility
+$clr-datagrid-column-separator-expandby: var(--clr-datagrid-column-separator-expandby) !default;
+
+$clr-datagrid-icon-size: var(--clr-datagrid-icon-size) !default;
+$clr-datagrid-action-arrow-size: var(--clr-datagrid-action-arrow-size) !default;
+$clr-datagrid-expandable-row-spinner-margin: calc(
+  (#{tables-variables.$clr-table-cell-height} - #{spinner-variables.$clr-spinner-small-size}) / 2
+);
+// @deprecated in favor of compact mode in density theme
+// using the compact value of spinner-variables.$clr-spinner-small-size as cds-global-space-7
+$clr-datagrid-compact-expandable-row-spinner-margin: calc(
+  (#{tables-variables.$clr-table-compact-cell-height} - #{tokens.$cds-global-space-7}) / 2
+);
+$clr-datagrid-compact-fixed-column-size: calc(
+  #{tokens.$cds-global-space-7} + (#{tables-variables.$clr-table-compact-horizontal-padding} * 2)
+);

package/data/stack-view/_properties.stack-view.scss

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('stack-view.properties') {
+  @include mixins.root-or-host() {
+    // Border dimensions
+    --clr-stack-view-border-width: #{tokens.$cds-alias-object-border-width-100};
+
+    &,
+    & [clr-density] {
+      // Border dimensions
+      --clr-stack-view-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      // Border colors
+      --clr-stack-view-border-color: #{tokens.$cds-alias-object-border-color};
+      // top-left-border-color of changed stack view row
+      --clr-stack-block-changed-border-top-color: var(--clr-stack-view-border-color);
+
+      // Stack view title text color
+      --clr-stack-view-title-color: #{tokens.$cds-alias-typography-color-400};
+
+      // non expandable row background and text/icon colors
+      --clr-stack-view-row-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-stack-view-row-bg-color: #{tokens.$cds-alias-object-container-background};
+
+      // expandable row background and text/icon colors
+      --clr-stack-view-expandable-row-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-stack-view-expandable-row-bg-color: #{tokens.$cds-alias-object-interaction-background};
+      --clr-stack-view-expandable-row-hover: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-stack-view-expandable-row-bg-hover: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-stack-view-expandable-row-active: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-stack-view-expandable-row-bg-active: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-stack-view-expanded-row-color: #{tokens.$cds-alias-object-interaction-color-selected};
+      --clr-stack-view-expanded-row-bg-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-stack-view-expanded-row-bg-color-hover: #{tokens.$cds-alias-object-interaction-background-selected-hover};
+      --clr-stack-view-expanded-row-bg-color-active: #{tokens.$cds-alias-object-interaction-background-selected-active};
+    }
+  }
+}

package/data/stack-view/_stack-view.clarity.scss

@@ -0,0 +1,267 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:meta';
+@use '../../accordion/variables.accordion' as accordion-variables;
+@use '../../image/icons.clarity';
+@use '../../image/mixins.images' as images-mixins;
+@use '../../styles/mixins';
+@use 'variables.stack-view' as stack-view-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.stack-view');
+@include mixins.exports('stack-view.clarity') {
+  .stack-header {
+    display: flex;
+    align-items: flex-end;
+
+    .stack-title {
+      display: block;
+      flex: 1 1 auto;
+      margin: 0;
+      padding: density.$clr-base-vertical-offset-m 0;
+      color: stack-view-variables.$clr-stack-view-title-color;
+
+      @include mixins.generate-typography-token('SUBSECTION-16-EXP');
+    }
+
+    .stack-actions {
+      display: block;
+      flex: 0 0 auto;
+
+      .stack-action {
+        min-width: tokens.$cds-global-space-11;
+        margin: 0;
+      }
+    }
+  }
+
+  .stack-view {
+    overflow-y: auto;
+    overflow-wrap: break-word;
+    margin-top: 0;
+    border: stack-view-variables.$clr-stack-view-border-width solid stack-view-variables.$clr-stack-view-border-color;
+    border-radius: stack-view-variables.$clr-stack-view-border-radius;
+
+    dd,
+    dt {
+      // One of the caveats of using definition lists here. Browsers automatically style them in unpredictable ways... :(
+      -webkit-margin-start: 0;
+      margin-inline-start: 0;
+      margin-left: 0;
+    }
+
+    .stack-block {
+      display: flex;
+      // Wrapping for nested stack-blocks
+      flex-flow: row wrap;
+      overflow-y: hidden;
+      border-bottom: stack-view-variables.$clr-stack-view-border-width solid
+        stack-view-variables.$clr-stack-view-border-color;
+    }
+
+    // We have to handle potential nested elements, typically for web components
+    > .stack-block:last-child,
+    > :last-child .stack-block:last-of-type {
+      // This way we keep a border-bottom on the last element if the stack view is higher
+      // than the total height of the  blocks it contains, but we do not have a
+      // weird 1px scroll when both heights match exactly.
+      border-bottom: none;
+    }
+
+    .stack-block-changed::before {
+      content: ' ';
+      position: absolute;
+
+      @include mixins.equilateral(0);
+
+      border-top: tokens.$cds-global-space-6 solid stack-view-variables.$clr-stack-block-changed-border-top-color;
+      border-right: tokens.$cds-global-space-6 solid transparent;
+    }
+
+    .stack-block-caret {
+      align-self: center;
+    }
+
+    .stack-block-label {
+      padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-l;
+      color: stack-view-variables.$clr-stack-view-row-color;
+      background-color: stack-view-variables.$clr-stack-view-row-bg-color;
+
+      @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+
+      &:focus {
+        outline-color: Highlight;
+        outline-color: -webkit-focus-ring-color;
+        outline-style: auto;
+        outline-width: tokens.$cds-global-space-1;
+        outline-offset: calc(-1 * tokens.$cds-global-space-1);
+      }
+    }
+
+    .stack-view-key {
+      flex: 0 1 40%;
+      max-width: 40%;
+      margin-right: density.$clr-base-layout-space-m;
+    }
+
+    .stack-block-caret {
+      visibility: hidden;
+
+      @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+
+      --color: #{stack-view-variables.$clr-stack-view-expandable-row-color};
+
+      margin-right: density.$clr-base-horizontal-offset-m;
+    }
+
+    .stack-block-content {
+      flex: 1 1 auto;
+      width: 60%;
+      margin-bottom: 0;
+
+      @include mixins.clr-container;
+    }
+
+    .stack-children {
+      flex: 0 0 auto;
+      width: 100%;
+
+      .stack-block {
+        border-bottom-color: stack-view-variables.$clr-stack-view-border-color;
+      }
+
+      > .stack-block:last-child,
+      > :last-child .stack-block:last-of-type {
+        // This way we keep a border-bottom on the last element if the stack view is higher
+        // than the total height of the  blocks it contains, but we do not have a
+        // weird 1px scroll when both heights match exactly.
+        border-bottom: none;
+      }
+
+      .stack-block-label,
+      .stack-block-content {
+        background-color: stack-view-variables.$clr-stack-view-row-bg-color;
+      }
+    }
+
+    .stack-block-expandable {
+      > .stack-block-label {
+        color: stack-view-variables.$clr-stack-view-expandable-row-color;
+        background-color: stack-view-variables.$clr-stack-view-expandable-row-bg-color;
+        cursor: pointer;
+
+        &::before {
+          display: inline-block;
+          content: '';
+
+          @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+          @include images-mixins.icon-background-styles();
+
+          background-image: icons.generateCaretIcon(accordion-variables.$clr-accordion-text-color);
+          transform: rotate(-90deg);
+          margin-right: density.$clr-base-layout-space-xs;
+        }
+
+        .stack-block-caret {
+          visibility: visible;
+        }
+      }
+
+      > .stack-block-label,
+      > .stack-block-content {
+        transition:
+          background-color 0.2s ease-in-out,
+          color 0.2s ease-in-out;
+      }
+
+      &:not(.stack-block-expanded) > .stack-block-label:hover {
+        color: stack-view-variables.$clr-stack-view-expandable-row-hover;
+        background-color: stack-view-variables.$clr-stack-view-expandable-row-bg-hover;
+
+        .stack-block-caret {
+          fill: stack-view-variables.$clr-stack-view-expandable-row-hover;
+        }
+
+        &:active {
+          color: stack-view-variables.$clr-stack-view-expandable-row-active;
+          background-color: stack-view-variables.$clr-stack-view-expandable-row-bg-active;
+
+          .stack-block-caret {
+            fill: stack-view-variables.$clr-stack-view-expandable-row-active;
+          }
+        }
+      }
+
+      &.stack-block-expanded > .stack-block-label {
+        border-bottom: stack-view-variables.$clr-stack-view-border-width solid
+          stack-view-variables.$clr-stack-view-border-color;
+        color: stack-view-variables.$clr-stack-view-expanded-row-color;
+        background-color: stack-view-variables.$clr-stack-view-expanded-row-bg-color;
+
+        &::before {
+          transform: rotate(0deg);
+        }
+
+        .stack-block-caret {
+          fill: stack-view-variables.$clr-stack-view-expanded-row-color;
+        }
+
+        &:hover {
+          color: stack-view-variables.$clr-stack-view-expandable-row-hover;
+          background-color: stack-view-variables.$clr-stack-view-expanded-row-bg-color-hover;
+
+          .stack-block-caret {
+            fill: stack-view-variables.$clr-stack-view-expandable-row-hover;
+          }
+
+          &:active {
+            color: stack-view-variables.$clr-stack-view-expandable-row-active;
+            background-color: stack-view-variables.$clr-stack-view-expanded-row-bg-color-active;
+
+            .stack-block-caret {
+              fill: stack-view-variables.$clr-stack-view-expandable-row-active;
+            }
+          }
+        }
+      }
+    }
+
+    /*
+      Styles specific to stack views used in a modal
+    */
+    .modal & {
+      margin-bottom: 0;
+    }
+
+    //Disable the generated icon without a breaking change for the stackview static markup
+    //Only targets the Angular component as of now. Static will require a breaking change.
+    clr-stack-block.stack-block-expandable {
+      .stack-block-label::before {
+        content: none;
+      }
+    }
+
+    .stack-children clr-stack-block,
+    .stack-children {
+      .stack-block-label {
+        .stack-view-key {
+          padding-left: density.$clr-base-horizontal-offset-l;
+        }
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/data/stack-view/_variables.stack-view.scss

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+// Usage: ../stack-view/_stack-view.clarity.scss
+$clr-stack-view-border-width: var(--clr-stack-view-border-width) !default;
+$clr-stack-view-border-radius: var(--clr-stack-view-border-radius) !default;
+$clr-stack-view-border-color: var(--clr-stack-view-border-color) !default;
+// top-left-border-color of changed stack view row
+$clr-stack-block-changed-border-top-color: var(--clr-stack-block-changed-border-top-color) !default;
+
+// Stack view title text color
+$clr-stack-view-title-color: var(--clr-stack-view-title-color) !default;
+
+// non expandable row background and text/icon colors
+$clr-stack-view-row-color: var(--clr-stack-view-row-color) !default;
+$clr-stack-view-row-bg-color: var(--clr-stack-view-row-bg-color) !default;
+
+// expandable row background and text/icon colors
+$clr-stack-view-expandable-row-color: var(--clr-stack-view-expandable-row-color) !default;
+$clr-stack-view-expandable-row-bg-color: var(--clr-stack-view-expandable-row-bg-color) !default;
+$clr-stack-view-expandable-row-hover: var(--clr-stack-view-expandable-row-hover) !default;
+$clr-stack-view-expandable-row-bg-hover: var(--clr-stack-view-expandable-row-bg-hover) !default;
+$clr-stack-view-expandable-row-active: var(--clr-stack-view-expandable-row-active) !default;
+$clr-stack-view-expandable-row-bg-active: var(--clr-stack-view-expandable-row-bg-active) !default;
+$clr-stack-view-expanded-row-color: var(--clr-stack-view-expanded-row-color) !default;
+$clr-stack-view-expanded-row-bg-color: var(--clr-stack-view-expanded-row-bg-color) !default;
+$clr-stack-view-expanded-row-bg-color-hover: var(--clr-stack-view-expanded-row-bg-color-hover) !default;
+$clr-stack-view-expanded-row-bg-color-active: var(--clr-stack-view-expanded-row-bg-color-active) !default;