@rossigee/clarity-ui 18.2.1-fixed

package/popover/signpost/_signposts.clarity.scss

@@ -0,0 +1,414 @@
+/*
+ * 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:map';
+@use 'sass:meta';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use 'variables.signpost' as signpost-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.signpost');
+@include mixins.exports('signpost.clarity') {
+  $clr-signpost-pointer-size-negative: calc(-1 * signpost-variables.$clr-signpost-pointer-size);
+
+  .signpost {
+    display: inline-block;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    .signpost-action:not(.close) {
+      margin: 0;
+      padding: 0;
+      border-width: 0;
+      color: signpost-variables.$clr-signpost-action-color;
+
+      cds-icon,
+      clr-icon {
+        &:not([size]) {
+          @include mixins.equilateral(density.$clr-base-icon-size-l);
+        }
+
+        color: signpost-variables.$clr-signpost-action-color;
+      }
+
+      cds-icon:hover,
+      clr-icon:hover,
+      &:hover {
+        color: signpost-variables.$clr-signpost-action-hover-color;
+      }
+
+      &.active cds-icon,
+      &.active clr-icon,
+      &.active {
+        color: signpost-variables.$clr-signpost-action-active-color;
+      }
+    }
+  }
+
+  .signpost-trigger {
+    margin: 0;
+    display: inline-flex;
+  }
+
+  .signpost-content {
+    background-color: transparent;
+    min-width: mixins.baselinePx(216);
+    max-width: mixins.baselinePx(360);
+    min-height: tokens.$cds-global-space-12;
+    max-height: mixins.baselinePx(504);
+    display: inline-block;
+    position: relative;
+    z-index: map.get(variables.$clr-layers, tooltips);
+
+    &:hover {
+      cursor: default;
+    }
+
+    .popover-pointer {
+      @include mixins.equilateral(0);
+
+      position: absolute;
+
+      &::before {
+        content: '';
+
+        @include mixins.equilateral(0);
+
+        position: absolute;
+      }
+    }
+
+    .signpost-content-header button {
+      line-height: 0;
+
+      @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+
+      cds-icon:not([size]),
+      clr-icon:not([size]) {
+        @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+      }
+    }
+  }
+
+  .signpost-content-header {
+    display: flex;
+    justify-content: flex-end;
+    gap: density.$clr-base-gap-xs;
+    width: 100%;
+    background-color: inherit;
+    top: 0;
+    border-radius: signpost-variables.$clr-signpost-border-radius;
+
+    .signpost-title {
+      @include mixins.generate-typography-token('ColumnHeader-11-SB-CPT');
+
+      margin-right: auto;
+    }
+  }
+
+  .signpost-wrap {
+    // bottom padding difference split between `wrap` and `content-body` because of #1503 (CDE-2225)
+    // Wrap have (offset-xl - 1px), Body have 1px;
+    $wrap-bottom-padding: calc(density.$clr-base-vertical-offset-xl - tokens.$cds-global-space-1);
+
+    gap: density.$clr-base-gap-s;
+    padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl $wrap-bottom-padding;
+    border: tokens.$cds-alias-object-border-width-100 solid signpost-variables.$clr-signpost-content-border-color;
+    border-radius: signpost-variables.$clr-signpost-border-radius;
+    background-color: signpost-variables.$clr-signpost-content-bg-color;
+    z-index: map.get(variables.$clr-layers, tooltips);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .signpost-content-body {
+    padding-bottom: tokens.$cds-global-space-1;
+    color: signpost-variables.$clr-signpost-content-color;
+    text-align: left;
+    max-height: mixins.baselinePx(450);
+    overflow-y: auto;
+
+    @include mixins.generate-typography-token('BODY-14-RG-CPT');
+  }
+
+  .clr-signpost-container.top-left,
+  .clr-signpost-container.top-middle,
+  .clr-signpost-container.top-right {
+    .popover-pointer {
+      border-top: signpost-variables.$clr-signpost-pointer-border;
+      bottom: $clr-signpost-pointer-size-negative;
+
+      &::before {
+        border-top: signpost-variables.$clr-signpost-pointer-pseudo-border;
+        bottom: tokens.$cds-global-space-2;
+      }
+    }
+  }
+
+  .clr-signpost-container.top-left {
+    .signpost-wrap {
+      border-bottom-right-radius: 0; // Turn off rounded corner here
+    }
+
+    .popover-pointer {
+      border-left: signpost-variables.$clr-signpost-pointer-invisible-border;
+      right: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-left: signpost-variables.$clr-signpost-pointer-invisible-border;
+        right: tokens.$cds-global-space-1;
+      }
+    }
+  }
+
+  .clr-signpost-container.top-middle {
+    .popover-pointer {
+      border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+      left: 50%;
+
+      &::before {
+        border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+        left: tokens.$cds-global-space-1;
+      }
+    }
+  }
+
+  .clr-signpost-container.top-right {
+    .signpost-wrap {
+      border-bottom-left-radius: 0; // Turn off rounded corner here
+    }
+
+    .popover-pointer {
+      border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+      left: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+        left: tokens.$cds-global-space-1;
+      }
+    }
+  }
+  // End top-*
+
+  /***
+    The signpost is below the icon top-{HORIZONTAL_POSITION}
+  */
+
+  .clr-signpost-container.bottom-left,
+  .clr-signpost-container.bottom-middle,
+  .clr-signpost-container.bottom,
+  .clr-signpost-container.bottom-right {
+    .popover-pointer {
+      border-bottom: signpost-variables.$clr-signpost-pointer-border;
+      top: $clr-signpost-pointer-size-negative;
+
+      &::before {
+        border-bottom: signpost-variables.$clr-signpost-pointer-pseudo-border;
+        top: tokens.$cds-global-space-2;
+      }
+    }
+  }
+
+  .clr-signpost-container.bottom-left {
+    .signpost-wrap {
+      border-top-right-radius: 0; // Turn off rounded corners here
+    }
+
+    .popover-pointer {
+      border-left: signpost-variables.$clr-signpost-pointer-invisible-border;
+      right: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-left: signpost-variables.$clr-signpost-pointer-invisible-border;
+        right: tokens.$cds-global-space-1;
+      }
+    }
+  }
+
+  .clr-signpost-container.bottom,
+  .clr-signpost-container.bottom-middle {
+    .popover-pointer {
+      border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+      left: 50%;
+
+      &::before {
+        border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+        right: calc($clr-signpost-pointer-size-negative - tokens.$cds-global-space-1);
+      }
+    }
+  }
+
+  .clr-signpost-container.bottom-right {
+    .signpost-wrap {
+      border-top-left-radius: 0; // Turn off rounded corners here
+    }
+
+    .popover-pointer {
+      border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+      left: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-right: signpost-variables.$clr-signpost-pointer-invisible-border;
+        left: tokens.$cds-global-space-1;
+      }
+    }
+  }
+  // End bottom-*
+
+  /***
+     The signpost is on the left side of the icon left-{VERTICAL_POSITION}
+  */
+
+  .clr-signpost-container.left-top,
+  .clr-signpost-container.left-middle,
+  .clr-signpost-container.left,
+  .clr-signpost-container.left-bottom {
+    .popover-pointer {
+      border-left: signpost-variables.$clr-signpost-pointer-border;
+      right: $clr-signpost-pointer-size-negative;
+
+      &::before {
+        border-left: signpost-variables.$clr-signpost-pointer-pseudo-border;
+      }
+    }
+  }
+
+  .clr-signpost-container.left-top {
+    .signpost-wrap {
+      border-bottom-right-radius: 0; // Turn off rounded corners here
+    }
+
+    .popover-pointer {
+      border-top: signpost-variables.$clr-signpost-pointer-invisible-border;
+      bottom: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-top: signpost-variables.$clr-signpost-pointer-invisible-border;
+        top: calc($clr-signpost-pointer-size-negative - tokens.$cds-global-space-1);
+        right: tokens.$cds-global-space-2;
+      }
+    }
+  }
+
+  .clr-signpost-container.left-middle,
+  .clr-signpost-container.left {
+    .popover-pointer {
+      border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+      top: 50%;
+
+      &::before {
+        border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+        top: tokens.$cds-global-space-1;
+        left: calc($clr-signpost-pointer-size-negative - tokens.$cds-global-space-2);
+      }
+    }
+  }
+
+  .clr-signpost-container.left-bottom {
+    .signpost-wrap {
+      border-top-right-radius: 0; // Turn off rounded corners here
+    }
+
+    .popover-pointer {
+      border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+      top: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+        top: tokens.$cds-global-space-1;
+        left: calc($clr-signpost-pointer-size-negative - tokens.$cds-global-space-2);
+      }
+    }
+  }
+  // End left-*
+
+  /***
+    The signpost is on the right side of the icon right-{VERTICAL_POSITION}
+  */
+
+  .clr-signpost-container.right-top,
+  .clr-signpost-container.right-middle,
+  .clr-signpost-container.right-bottom {
+    .popover-pointer {
+      border-right: signpost-variables.$clr-signpost-pointer-border;
+      left: $clr-signpost-pointer-size-negative;
+
+      &::before {
+        border-right: signpost-variables.$clr-signpost-pointer-pseudo-border;
+        left: tokens.$cds-global-space-2;
+      }
+    }
+  }
+
+  .clr-signpost-container.right-top {
+    .signpost-wrap {
+      border-bottom-left-radius: 0; // turn off rounded corner here
+    }
+
+    .popover-pointer {
+      border-top: signpost-variables.$clr-signpost-pointer-invisible-border;
+      bottom: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-top: signpost-variables.$clr-signpost-pointer-invisible-border;
+        top: calc($clr-signpost-pointer-size-negative - tokens.$cds-global-space-1);
+      }
+    }
+  }
+
+  .clr-signpost-container.right-middle {
+    .popover-pointer {
+      border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+      top: 50%;
+
+      &::before {
+        border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+        top: tokens.$cds-global-space-1;
+      }
+    }
+  }
+
+  .clr-signpost-container.right-bottom {
+    .signpost-wrap {
+      border-top-left-radius: 0; // turn off rounded corner here
+    }
+
+    .popover-pointer {
+      border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+      top: calc(-1 * tokens.$cds-global-space-1);
+
+      &::before {
+        border-bottom: signpost-variables.$clr-signpost-pointer-invisible-border;
+        top: tokens.$cds-global-space-1;
+      }
+    }
+  }
+
+  /***
+    TODO: Create a general mix-in for the popover-pointer that can
+    1. Accomadate all 12 positions
+    2. Unification for the nomenclature between components
+        (if possible, I know they all use slightly different terms)
+    3. Be used across Tooltips, Signposts (Do we also want it for Dropdowns)
+    4. What's up with the namespacing here? Usually we use `clr-*` to denote
+        Clarity components but we aren't doing that in signposts. We should
+        consider it.
+  */
+
+  /* NOTE:
+    signposts need precise pixels for some measurements due to the design
+    Hence the 1px and 2px values you'll see.
+
+    I've tested the calcs while resizing the base font-size for the rem
+    measurements and they appear to hold up well.
+  */
+}

package/popover/signpost/_variables.signpost.scss

@@ -0,0 +1,21 @@
+/*
+ * 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: ../signpost/_signpost.clarity.scss
+$clr-signpost-content-color: var(--clr-signpost-content-color) !default;
+$clr-signpost-content-bg-color: var(--clr-signpost-content-bg-color) !default;
+$clr-signpost-content-border-color: var(--clr-signpost-content-border-color) !default;
+
+$clr-signpost-action-color: var(--clr-signpost-action-color) !default;
+$clr-signpost-action-hover-color: var(--clr-signpost-action-hover-color) !default;
+$clr-signpost-action-active-color: var(--clr-signpost-action-active-color) !default;
+
+$clr-signpost-border-radius: var(--clr-signpost-border-radius) !default;
+
+$clr-signpost-pointer-size: var(--clr-signpost-pointer-size) !default;
+$clr-signpost-pointer-border: var(--clr-signpost-pointer-border) !default;
+$clr-signpost-pointer-invisible-border: var(--clr-signpost-pointer-invisible-border) !default;
+$clr-signpost-pointer-pseudo-border: var(--clr-signpost-pointer-pseudo-border) !default;

package/popover/tooltip/_mixins.tooltip.scss

@@ -0,0 +1,186 @@
+/*
+ * 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:map';
+@use 'sass:list';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use 'variables.tooltip' as tooltip-variables;
+@use '../../styles/variables/variables.density' as density;
+
+$tooltip-configs: (
+  'top-right': (
+    top,
+    right,
+  ),
+  'top-left': (
+    top,
+    left,
+  ),
+  'bottom-right': (
+    bottom,
+    right,
+  ),
+  'bottom-left': (
+    bottom,
+    left,
+  ),
+  'right': (
+    right,
+    null,
+  ),
+  'left': (
+    left,
+    null,
+  ),
+);
+
+@mixin generate-tooltip-styles($isCss: true) {
+  $prefix: '';
+
+  @if $isCss {
+    $prefix: 'tooltip-';
+  }
+
+  @each $name, $args in $tooltip-configs {
+    // Destructure arguments
+    $dirA: list.nth($args, 1);
+    $dirB: list.nth($args, 2);
+
+    // Generate Selector
+    &.#{$prefix}#{$name} > .tooltip-content {
+      // Logic: If second direction exists, it's vertical. Otherwise, horizontal.
+      @if $dirB {
+        @include vertical-tooltip-generator($dirA, $dirB, $isCss);
+      } @else {
+        @include horizontal-tooltip-generator($dirA, $isCss);
+      }
+    }
+  }
+}
+@mixin tooltip-sizes {
+  &.tooltip-xs > .tooltip-content,
+  .tooltip-content.tooltip-xs {
+    width: tokens.$cds-global-space-14;
+  }
+
+  &.tooltip-sm > .tooltip-content,
+  .tooltip-content.tooltip-sm {
+    width: mixins.baselinePx(120);
+  }
+
+  &.tooltip-md > .tooltip-content,
+  .tooltip-content.tooltip-md {
+    width: mixins.baselinePx(240);
+  }
+
+  &.tooltip-lg > .tooltip-content,
+  .tooltip-content.tooltip-lg {
+    width: mixins.baselinePx(360);
+  }
+}
+@mixin common-tooltip-styles {
+  margin: 0; //Resetting any margin that might be applied to span/div elements inside forms
+  width: mixins.baselinePx(240);
+  border-radius: tooltip-variables.$clr-tooltip-border-radius;
+  padding: density.$clr-base-vertical-offset-l density.$clr-base-horizontal-offset-l;
+  color: tooltip-variables.$clr-tooltip-color;
+  background-color: tooltip-variables.$clr-tooltip-background-color;
+
+  @include mixins.generate-typography-token(
+    'BODY-14-RG-CPT',
+    (
+      font-weight: tooltip-variables.$clr-tooltip-font-weight,
+    )
+  );
+}
+@mixin common-tooltip-content-styles {
+  //Both visibility and opacity are needed. Opacity handles the transition.
+  //And visibility makes sure that the user cant select the text in the tooltip-content
+  //when hidden
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s linear;
+  white-space: normal;
+  z-index: map.get(variables.$clr-layers, tooltips);
+
+  // This allows a user to hover their mouse over the tooltip to stop it from hiding
+  &::after {
+    position: absolute;
+    inset: -20px;
+    content: '';
+    // make sure this is underneath the tooltip so that user can use their mouse to select text
+    z-index: -1;
+  }
+
+  // color overrides for components and HTML elements
+  li {
+    color: inherit;
+  }
+}
+@mixin vertical-tooltip-generator($dirA: top, $dirB: right, $plain: false) {
+  $oppA: map.get(mixins.$opp-directions, $dirA);
+  $oppB: map.get(mixins.$opp-directions, $dirB);
+
+  @include common-tooltip-styles;
+
+  @if $plain {
+    position: absolute;
+    #{$dirA}: auto;
+    #{$oppA}: 100%;
+    #{$oppB}: 50%;
+    #{$dirB}: auto;
+    margin-#{$oppA}: tooltip-variables.$clr-tooltip-adjusted-margin;
+  }
+
+  border-#{$oppA}-#{$oppB}-radius: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    #{$oppB}: 0;
+    #{$dirA}: auto;
+    #{$dirB}: auto;
+    #{$oppA}: calc(-1 * #{tooltip-variables.$clr-tooltip-arrow-height});
+    border-#{$oppB}: tooltip-variables.$clr-tooltip-arrow-height solid tooltip-variables.$clr-tooltip-background-color;
+    border-#{$dirA}: tooltip-variables.$clr-tooltip-arrow-width solid tooltip-variables.$clr-tooltip-background-color;
+    border-#{$oppA}: tooltip-variables.$clr-tooltip-arrow-width solid transparent;
+    border-#{$dirB}: tooltip-variables.$clr-tooltip-arrow-width solid transparent;
+  }
+}
+@mixin horizontal-tooltip-generator($dirA: right, $plain: false) {
+  $oppA: map.get(mixins.$opp-directions, $dirA);
+
+  @include common-tooltip-styles;
+
+  @if $plain {
+    position: absolute;
+    #{$dirA}: auto;
+    #{$oppA}: 100%;
+    top: 50%;
+    bottom: auto;
+    margin-#{$oppA}: tooltip-variables.$clr-tooltip-adjusted-margin;
+  }
+
+  border-top-#{$oppA}-radius: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    bottom: auto;
+    #{$dirA}: auto;
+    #{$oppA}: calc(-1 * #{tooltip-variables.$clr-tooltip-arrow-width});
+    border-top: tooltip-variables.$clr-tooltip-arrow-height solid tooltip-variables.$clr-tooltip-background-color;
+    border-#{$dirA}: tooltip-variables.$clr-tooltip-arrow-width solid tooltip-variables.$clr-tooltip-background-color;
+    border-bottom: tooltip-variables.$clr-tooltip-arrow-height solid transparent;
+    border-#{$oppA}: tooltip-variables.$clr-tooltip-arrow-width solid transparent;
+  }
+}

package/popover/tooltip/_properties.tooltip.scss

@@ -0,0 +1,28 @@
+/*
+ * 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('tooltip.properties') {
+  @include mixins.root-or-host() {
+    // Usage: ../popover/tooltip/_tooltips.clarity.scss
+    --clr-tooltip-font-weight: #{tokens.$cds-alias-typography-body-font-weight};
+
+    &,
+    & [clr-density] {
+      --clr-tooltip-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-tooltip-background-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-tooltip-color: #{tokens.$cds-alias-typography-color-100};
+    }
+  }
+}