@rossigee/clarity-ui 18.2.1-fixed

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

@@ -0,0 +1,41 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('tree.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [clr-density] {
+      // Usage: ../data/tree-view/_tree-view.clarity.scss
+      --clr-tree-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-tree-node-caret-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-tree-node-caret-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-tree-node-caret-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-tree-node-caret-disabled-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-tree-node-content-text-only-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-tree-node-content-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-tree-node-content-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-tree-node-content-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-tree-node-content-bg-hover-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-tree-node-content-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-tree-node-content-bg-active-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-tree-node-content-selected-color: #{tokens.$cds-alias-object-interaction-color-selected};
+      --clr-tree-node-content-bg-selected-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-tree-node-content-bg-selected-hover-color: var(--cds-alias-object-interaction-background-selected-hover);
+      --clr-tree-node-content-bg-selected-active-color: var(--cds-alias-object-interaction-background-selected-active);
+      --clr-tree-node-content-disabled-color: #{tokens.$cds-alias-typography-disabled};
+      --clr-tree-node-content-bg-disabled-color: #{tokens.$cds-alias-object-opacity-0};
+    }
+  }
+}

package/data/tree-view/_tree-view.clarity.scss

@@ -0,0 +1,281 @@
+/*
+ * 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 '../../styles/mixins';
+@use 'variables.tree-view' as tree-view-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.tree-view');
+@include mixins.exports('tree-view.clarity') {
+  .clr-tree-node {
+    //Display
+    display: block;
+
+    &.disabled .clr-tree-node-content-container {
+      cursor: not-allowed;
+
+      .clr-treenode-link {
+        pointer-events: none;
+      }
+
+      .clr-treenode-link,
+      .clr-treenode-content,
+      .clr-treenode-checkbox {
+        background-color: var(--clr-tree-node-content-bg-disabled-color);
+      }
+
+      .clr-treenode-link,
+      .clr-treenode-content,
+      .clr-treenode-checkbox input[type='checkbox'] + .clr-control-label {
+        color: var(--clr-tree-node-content-disabled-color);
+
+        cds-icon,
+        clr-icon {
+          fill: var(--clr-tree-node-caret-disabled-color);
+        }
+      }
+
+      .clr-treenode-caret {
+        cursor: not-allowed;
+
+        cds-icon,
+        clr-icon {
+          fill: var(--clr-tree-node-caret-disabled-color);
+        }
+      }
+    }
+  }
+
+  .clr-tree-node-content-container {
+    //Display
+    display: flex;
+    align-items: flex-start;
+
+    @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+    & > .clr-treenode-checkbox.clr-checkbox-wrapper {
+      width: 100%;
+
+      &:first-child {
+        margin-left: tree-view-variables.$clr-tree-node-touch-target;
+      }
+
+      .clr-control-label {
+        width: 100%;
+        padding: tree-view-variables.$clr-tree-node-content-padding;
+        padding-left: 0;
+
+        // Add touch area to label that covers the checkbox, so we don't need to resize the
+        // checkbox itself, which leads to undesired side effects.
+        &::before {
+          content: '';
+          position: absolute;
+          left: calc(-1 * tree-view-variables.$clr-tree-node-checkbox-input-size);
+          top: 0;
+          height: 100%;
+          width: tree-view-variables.$clr-tree-node-checkbox-input-size;
+        }
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus > .clr-treenode-content,
+    &:focus > .clr-treenode-checkbox {
+      outline-offset: calc(-1 * tokens.$cds-alias-object-border-width-200);
+
+      @include mixins.include-slim-outline-style-form-fields(tokens.$cds-alias-object-border-width-200);
+    }
+  }
+
+  .clr-treenode-content {
+    //Display
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    gap: tree-view-variables.$clr-tree-node-content-gap;
+    color: tree-view-variables.$clr-tree-node-content-text-only-color;
+    background-color: tree-view-variables.$clr-tree-node-content-bg-color;
+
+    //Dimensions
+    &:first-child {
+      margin-left: tree-view-variables.$clr-tree-node-touch-target;
+    }
+
+    padding: tree-view-variables.$clr-tree-node-content-padding;
+
+    &:has(.clr-treenode-link) {
+      padding: 0;
+    }
+
+    //Others
+    border-radius: tree-view-variables.$clr-tree-border-radius;
+
+    cds-icon,
+    clr-icon {
+      &:not([size]) {
+        @include mixins.min-equilateral(tree-view-variables.$clr-tree-caret-size);
+      }
+
+      color: tree-view-variables.$clr-tree-node-content-text-only-color;
+      vertical-align: middle;
+    }
+  }
+
+  // selected
+  .clr-treenode-content:has(.clr-treenode-link.active),
+  .clr-treenode-checkbox:has(input[type='checkbox']:not(:disabled):checked) {
+    color: tree-view-variables.$clr-tree-node-content-selected-color;
+    background-color: tree-view-variables.$clr-tree-node-content-bg-selected-color;
+  }
+
+  .clr-treenode-content:has(.clr-treenode-link),
+  .clr-treenode-checkbox {
+    border-radius: tree-view-variables.$clr-tree-border-radius;
+    background-color: tree-view-variables.$clr-tree-node-content-bg-color;
+
+    &:hover {
+      background-color: tree-view-variables.$clr-tree-node-content-bg-hover-color;
+    }
+
+    &:active {
+      background-color: tree-view-variables.$clr-tree-node-content-bg-active-color;
+    }
+  }
+
+  .clr-treenode-checkbox input[type='checkbox'] {
+    @include mixins.min-equilateral(tree-view-variables.$clr-tree-checkbox-size);
+
+    padding: 0;
+    // Using margin instead of gap due to checkbox implementation specifics.
+    margin: density.$clr-base-vertical-offset-multi-row-inline-m tree-view-variables.$clr-tree-node-content-gap
+      density.$clr-base-vertical-offset-multi-row-inline-m tree-view-variables.$clr-tree-node-horizontal-offset;
+  }
+
+  .clr-treenode-content .clr-treenode-link,
+  .clr-treenode-checkbox input[type='checkbox'] + .clr-control-label {
+    color: tree-view-variables.$clr-tree-node-content-color;
+    background-color: tree-view-variables.$clr-tree-node-content-bg-color;
+    padding: tree-view-variables.$clr-tree-node-content-padding;
+
+    cds-icon,
+    clr-icon {
+      color: tree-view-variables.$clr-tree-node-content-color;
+    }
+
+    &:hover {
+      color: tree-view-variables.$clr-tree-node-content-hover-color;
+
+      cds-icon,
+      clr-icon {
+        color: tree-view-variables.$clr-tree-node-content-hover-color;
+      }
+    }
+
+    &:active {
+      color: tree-view-variables.$clr-tree-node-content-active-color;
+
+      cds-icon,
+      clr-icon {
+        color: tree-view-variables.$clr-tree-node-content-active-color;
+      }
+    }
+  }
+
+  // selected
+  .clr-treenode-content:has(.clr-treenode-link.active),
+  .clr-treenode-checkbox:has(input[type='checkbox']:not(:disabled):checked) {
+    &:hover {
+      background-color: tree-view-variables.$clr-tree-node-content-bg-selected-hover-color;
+    }
+
+    &:active {
+      background-color: tree-view-variables.$clr-tree-node-content-bg-selected-active-color;
+    }
+  }
+
+  .clr-treenode-caret {
+    //Display
+    flex: 0 0 tree-view-variables.$clr-tree-node-touch-target;
+
+    //Dimensions
+    margin: 0;
+    padding: 0;
+
+    @include mixins.min-equilateral(tree-view-variables.$clr-tree-node-touch-target);
+
+    //Others
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: tree-view-variables.$clr-tree-node-caret-color;
+
+    &:hover {
+      color: tree-view-variables.$clr-tree-node-caret-hover-color;
+    }
+
+    &:active {
+      color: tree-view-variables.$clr-tree-node-caret-active-color;
+    }
+  }
+
+  .clr-treenode-caret-icon {
+    //Dimensions
+
+    @include mixins.equilateral(tree-view-variables.$clr-tree-caret-size);
+
+    //Others
+    vertical-align: middle;
+  }
+
+  .clr-treenode-spinner-container {
+    //Dimensions
+
+    @include mixins.min-equilateral(tree-view-variables.$clr-tree-node-touch-target);
+
+    padding: tree-view-variables.$clr-tree-node-content-padding;
+  }
+
+  .clr-treenode-spinner {
+    //Dimensions
+
+    @include mixins.min-equilateral(tree-view-variables.$clr-tree-spinner-size);
+  }
+
+  .clr-treenode-children {
+    //Dimensions
+    margin-left: tree-view-variables.$clr-tree-node-children-margin;
+    will-change: height;
+    overflow-y: hidden;
+  }
+
+  .clr-treenode-link {
+    //Display
+    display: inline-block;
+
+    //Dimensions
+
+    @include mixins.equilateral(100%);
+
+    margin: 0;
+
+    //Others
+    border: 0;
+    cursor: pointer;
+    text-align: left;
+
+    //States
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+// Usage: ../data/tree-view/_tree-view.clarity.scss
+$clr-tree-border-radius: var(--clr-tree-border-radius) !default;
+
+$clr-tree-caret-size: #{density.$clr-base-icon-size-s} !default;
+$clr-tree-checkbox-size: #{density.$clr-base-icon-size-s} !default;
+$clr-tree-spinner-size: #{density.$clr-base-icon-size-s} !default;
+$clr-tree-node-touch-target: #{density.$clr-base-tree-node-height} !default;
+$clr-tree-node-children-margin: $clr-tree-node-touch-target !default;
+
+$clr-tree-node-content-gap: #{density.$clr-base-gap-s} !default;
+$clr-tree-node-horizontal-offset: #{density.$clr-base-horizontal-offset-m} !default;
+$clr-tree-node-content-padding: #{density.$clr-base-vertical-offset-multi-row-inline-m}
+  #{density.$clr-base-horizontal-offset-m} !default;
+$clr-tree-node-icon-padding: #{density.$clr-base-vertical-offset-m} 0 !default;
+$clr-tree-node-checkbox-input-size: calc(
+  #{$clr-tree-checkbox-size} + #{$clr-tree-node-content-gap} + #{$clr-tree-node-horizontal-offset}
+) !default;
+
+$clr-tree-node-caret-color: var(--clr-tree-node-caret-color) !default;
+$clr-tree-node-caret-hover-color: var(--clr-tree-node-caret-hover-color) !default;
+$clr-tree-node-caret-active-color: var(--clr-tree-node-caret-active-color) !default;
+$clr-tree-node-caret-disabled-color: var(--clr-tree-node-caret-disabled-color) !default;
+
+$clr-tree-node-content-text-only-color: var(--clr-tree-node-content-text-only-color) !default;
+
+$clr-tree-node-content-color: var(--clr-tree-node-content-color) !default;
+$clr-tree-node-content-bg-color: var(--clr-tree-node-content-bg-color) !default;
+
+$clr-tree-node-content-hover-color: var(--clr-tree-node-content-hover-color) !default;
+$clr-tree-node-content-bg-hover-color: var(--clr-tree-node-content-bg-hover-color) !default;
+
+$clr-tree-node-content-active-color: var(--clr-tree-node-content-active-color) !default;
+$clr-tree-node-content-bg-active-color: var(--clr-tree-node-content-bg-active-color) !default;
+
+$clr-tree-node-content-selected-color: var(--clr-tree-node-content-selected-color);
+$clr-tree-node-content-bg-selected-color: var(--clr-tree-node-content-bg-selected-color) !default;
+$clr-tree-node-content-bg-selected-hover-color: var(--clr-tree-node-content-bg-selected-hover-color) !default;
+$clr-tree-node-content-bg-selected-active-color: var(--clr-tree-node-content-bg-selected-active-color) !default;
+
+$clr-tree-node-content-disabled-color: var(--clr-tree-node-content-disabled-color) !default;
+$clr-tree-node-content-bg-disabled-color: var(--clr-tree-node-content-bg-disabled-color) !default;