@rossigee/clarity-ui 18.2.1-fixed

package/emphasis/badge/_badges.clarity.scss

@@ -0,0 +1,61 @@
+/*
+ * 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.badges' as badges-variables;
+@use 'mixins.bades' as badges-mixins;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.badges');
+@include mixins.exports('badges.clarity') {
+  .badge {
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+    min-width: #{tokens.$cds-global-space-7};
+    height: density.$clr-base-row-height-xs;
+    border-radius: density.$clr-base-border-radius-xl;
+    padding: 0 calc(#{density.$clr-base-horizontal-offset-xs} - #{tokens.$cds-alias-object-border-width-100});
+    margin-right: density.$clr-base-horizontal-offset-s;
+    white-space: nowrap;
+    text-align: center;
+
+    @include mixins.generate-typography-token('CAPTION-SM-10');
+
+    border: tokens.$cds-alias-object-border-width-100 solid badges-variables.$clr-badge-border-color;
+    background-color: badges-variables.$clr-badge-background-color;
+    color: badges-variables.$clr-badge-color;
+
+    &.outlined {
+      border-color: badges-variables.$clr-badge-outline-border-color;
+      background-color: badges-variables.$clr-badge-outline-bg-color;
+      color: badges-variables.$clr-badge-outline-color;
+    }
+
+    &:visited {
+      color: badges-variables.$clr-badge-color;
+    }
+
+    // Link badge, default, no color or type specifier. Override a:link setting.
+    &:link {
+      @include badges-mixins.generateBadgeStyles(gray);
+    }
+
+    @include badges-mixins.generateBadgeStyles(gray, 1);
+    @include badges-mixins.generateBadgeStyles(purple, 2);
+    @include badges-mixins.generateBadgeStyles(blue, 3);
+    @include badges-mixins.generateBadgeStyles(orange, 4);
+    @include badges-mixins.generateBadgeStyles(light-blue, 5);
+    @include badges-mixins.generateBadgeStyles(info);
+    @include badges-mixins.generateBadgeStyles(success);
+    @include badges-mixins.generateBadgeStyles(danger);
+    @include badges-mixins.generateBadgeStyles(warning);
+  }
+}

package/emphasis/badge/_mixins.bades.scss

@@ -0,0 +1,34 @@
+/*
+ * 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 'variables.badges' as badges-variables;
+
+@mixin buildBadgeStyles($colors) {
+  border-color: map.get($colors, border-color);
+  background-color: map.get($colors, bg-color);
+  color: map.get($colors, color);
+
+  &.outlined {
+    border-color: map.get($colors, outline-border-color);
+    background-color: map.get($colors, outline-bg-color);
+    color: map.get($colors, outline-color);
+  }
+}
+@mixin generateBadgeStyles($color: gray, $alias: null) {
+  $colors: map.get(badges-variables.$badge-colors, $color);
+
+  &.badge-#{'' + $color} {
+    @include buildBadgeStyles($colors);
+  }
+
+  @if ($alias) {
+    &.badge-#{$alias} {
+      @include buildBadgeStyles($colors);
+    }
+  }
+}

package/emphasis/badge/_properties.badges.scss

@@ -0,0 +1,82 @@
+/*
+ * 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;
+
+@include mixins.exports('badge.properties') {
+  @include mixins.root-or-host() {
+    &,
+    [cds-theme] {
+      // default
+      --clr-badge-background-color: #{tokens.$cds-alias-utility-gray};
+      --clr-badge-border-color: #{tokens.$cds-alias-utility-gray};
+      --clr-badge-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-outline-bg-color: #{tokens.$cds-alias-utility-gray-tint};
+      --clr-badge-outline-border-color: #{tokens.$cds-alias-utility-gray};
+      --clr-badge-outline-color: #{tokens.$cds-alias-typography-color-500};
+
+      // solid
+      --clr-badge-info-bg-color: #{tokens.$cds-alias-utility-blue};
+      --clr-badge-info-border-color: #{tokens.$cds-alias-utility-blue};
+      --clr-badge-info-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-success-bg-color: #{tokens.$cds-alias-utility-green};
+      --clr-badge-success-border-color: #{tokens.$cds-alias-utility-green};
+      --clr-badge-success-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-warning-bg-color: #{tokens.$cds-alias-utility-yellow};
+      --clr-badge-warning-border-color: #{tokens.$cds-alias-utility-yellow};
+      --clr-badge-warning-color: #{tokens.$cds-global-color-black};
+      --clr-badge-danger-bg-color: #{tokens.$cds-alias-utility-red};
+      --clr-badge-danger-border-color: #{tokens.$cds-alias-utility-red};
+      --clr-badge-danger-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-gray-bg-color: #{tokens.$cds-alias-utility-gray};
+      --clr-badge-gray-border-color: #{tokens.$cds-alias-utility-gray};
+      --clr-badge-gray-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-purple-bg-color: #{tokens.$cds-alias-utility-violet};
+      --clr-badge-purple-border-color: #{tokens.$cds-alias-utility-violet};
+      --clr-badge-purple-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-blue-bg-color: #{tokens.$cds-alias-utility-dark-blue};
+      --clr-badge-blue-border-color: #{tokens.$cds-alias-utility-dark-blue};
+      --clr-badge-blue-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-badge-orange-bg-color: #{tokens.$cds-alias-utility-tangerine};
+      --clr-badge-orange-border-color: #{tokens.$cds-alias-utility-tangerine};
+      --clr-badge-orange-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-light-blue-bg-color: #{tokens.$cds-alias-utility-light-blue};
+      --clr-badge-light-blue-border-color: #{tokens.$cds-alias-utility-light-blue};
+      --clr-badge-light-blue-color: #{tokens.$cds-alias-typography-color-500};
+
+      // outlined
+      --clr-badge-info-outline-bg-color: #{tokens.$cds-alias-utility-blue-tint};
+      --clr-badge-info-outline-border-color: #{tokens.$cds-alias-utility-blue};
+      --clr-badge-info-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-success-outline-bg-color: #{tokens.$cds-alias-utility-green-tint};
+      --clr-badge-success-outline-border-color: #{tokens.$cds-alias-utility-green};
+      --clr-badge-success-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-warning-outline-bg-color: #{tokens.$cds-alias-utility-yellow-tint};
+      --clr-badge-warning-outline-border-color: #{tokens.$cds-alias-utility-yellow};
+      --clr-badge-warning-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-danger-outline-bg-color: #{tokens.$cds-alias-utility-red-tint};
+      --clr-badge-danger-outline-border-color: #{tokens.$cds-alias-utility-red};
+      --clr-badge-danger-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-gray-outline-bg-color: #{tokens.$cds-alias-utility-gray-tint};
+      --clr-badge-gray-outline-border-color: #{tokens.$cds-alias-utility-gray};
+      --clr-badge-gray-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-purple-outline-bg-color: #{tokens.$cds-alias-utility-violet-tint};
+      --clr-badge-purple-outline-border-color: #{tokens.$cds-alias-utility-violet};
+      --clr-badge-purple-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-blue-outline-bg-color: #{tokens.$cds-alias-utility-dark-blue-tint};
+      --clr-badge-blue-outline-border-color: #{tokens.$cds-alias-utility-dark-blue};
+      --clr-badge-blue-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-orange-outline-bg-color: #{tokens.$cds-alias-utility-tangerine-tint};
+      --clr-badge-orange-outline-border-color: #{tokens.$cds-alias-utility-tangerine};
+      --clr-badge-orange-outline-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-badge-light-blue-outline-bg-color: #{tokens.$cds-alias-utility-light-blue-tint};
+      --clr-badge-light-blue-outline-border-color: #{tokens.$cds-alias-utility-light-blue};
+      --clr-badge-light-blue-outline-color: #{tokens.$cds-alias-typography-color-500};
+    }
+  }
+}

package/emphasis/badge/_variables.badges.scss

@@ -0,0 +1,160 @@
+/*
+ * 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.
+ */
+// default (gray)
+$clr-badge-background-color: var(--clr-badge-background-color) !default;
+$clr-badge-border-color: var(--clr-badge-border-color) !default;
+$clr-badge-color: var(--clr-badge-color) !default;
+$clr-badge-outline-bg-color: var(--clr-badge-outline-bg-color) !default;
+$clr-badge-outline-border-color: var(--clr-badge-outline-border-color) !default;
+$clr-badge-outline-color: var(--clr-badge-outline-color) !default;
+
+// info
+$clr-badge-info-bg-color: var(--clr-badge-info-bg-color) !default;
+$clr-badge-info-border-color: var(--clr-badge-info-border-color) !default;
+$clr-badge-info-color: var(--clr-badge-info-color) !default;
+$clr-badge-info-outline-bg-color: var(--clr-badge-info-outline-bg-color) !default;
+$clr-badge-info-outline-border-color: var(--clr-badge-info-outline-border-color) !default;
+$clr-badge-info-outline-color: var(--clr-badge-info-outline-color) !default;
+
+// success
+$clr-badge-success-bg-color: var(--clr-badge-success-bg-color) !default;
+$clr-badge-success-border-color: var(--clr-badge-success-border-color) !default;
+$clr-badge-success-color: var(--clr-badge-success-color) !default;
+$clr-badge-success-outline-bg-color: var(--clr-badge-success-outline-bg-color) !default;
+$clr-badge-success-outline-border-color: var(--clr-badge-success-outline-border-color) !default;
+$clr-badge-success-outline-color: var(--clr-badge-success-outline-color) !default;
+
+// warning
+$clr-badge-warning-bg-color: var(--clr-badge-warning-bg-color) !default;
+$clr-badge-warning-border-color: var(--clr-badge-warning-border-color) !default;
+$clr-badge-warning-color: var(--clr-badge-warning-color) !default;
+$clr-badge-warning-outline-bg-color: var(--clr-badge-warning-outline-bg-color) !default;
+$clr-badge-warning-outline-border-color: var(--clr-badge-warning-outline-border-color) !default;
+$clr-badge-warning-outline-color: var(--clr-badge-warning-outline-color) !default;
+
+// danger
+$clr-badge-danger-bg-color: var(--clr-badge-danger-bg-color) !default;
+$clr-badge-danger-border-color: var(--clr-badge-danger-border-color) !default;
+$clr-badge-danger-color: var(--clr-badge-danger-color) !default;
+$clr-badge-danger-outline-bg-color: var(--clr-badge-danger-outline-bg-color) !default;
+$clr-badge-danger-outline-border-color: var(--clr-badge-danger-outline-border-color) !default;
+$clr-badge-danger-outline-color: var(--clr-badge-danger-outline-color) !default;
+
+// gray
+$clr-badge-gray-bg-color: var(--clr-badge-gray-bg-color) !default;
+$clr-badge-gray-border-color: var(--clr-badge-gray-border-color) !default;
+$clr-badge-gray-color: var(--clr-badge-gray-color) !default;
+$clr-badge-gray-outline-bg-color: var(--clr-badge-gray-outline-bg-color) !default;
+$clr-badge-gray-outline-border-color: var(--clr-badge-gray-outline-border-color) !default;
+$clr-badge-gray-outline-color: var(--clr-badge-gray-outline-color) !default;
+
+// purple
+$clr-badge-purple-bg-color: var(--clr-badge-purple-bg-color) !default;
+$clr-badge-purple-border-color: var(--clr-badge-purple-border-color) !default;
+$clr-badge-purple-color: var(--clr-badge-purple-color) !default;
+$clr-badge-purple-outline-bg-color: var(--clr-badge-purple-outline-bg-color) !default;
+$clr-badge-purple-outline-border-color: var(--clr-badge-purple-outline-border-color) !default;
+$clr-badge-purple-outline-color: var(--clr-badge-purple-outline-color) !default;
+
+// blue
+$clr-badge-blue-bg-color: var(--clr-badge-blue-bg-color) !default;
+$clr-badge-blue-border-color: var(--clr-badge-blue-border-color) !default;
+$clr-badge-blue-color: var(--clr-badge-blue-color) !default;
+$clr-badge-blue-outline-bg-color: var(--clr-badge-blue-outline-bg-color) !default;
+$clr-badge-blue-outline-border-color: var(--clr-badge-blue-outline-border-color) !default;
+$clr-badge-blue-outline-color: var(--clr-badge-blue-outline-color) !default;
+
+// orange
+$clr-badge-orange-bg-color: var(--clr-badge-orange-bg-color) !default;
+$clr-badge-orange-border-color: var(--clr-badge-orange-border-color) !default;
+$clr-badge-orange-color: var(--clr-badge-orange-color) !default;
+$clr-badge-orange-outline-bg-color: var(--clr-badge-orange-outline-bg-color) !default;
+$clr-badge-orange-outline-border-color: var(--clr-badge-orange-outline-border-color) !default;
+$clr-badge-orange-outline-color: var(--clr-badge-orange-outline-color) !default;
+
+// light-blue
+$clr-badge-light-blue-bg-color: var(--clr-badge-light-blue-bg-color) !default;
+$clr-badge-light-blue-border-color: var(--clr-badge-light-blue-border-color) !default;
+$clr-badge-light-blue-color: var(--clr-badge-light-blue-color) !default;
+$clr-badge-light-blue-outline-bg-color: var(--clr-badge-light-blue-outline-bg-color) !default;
+$clr-badge-light-blue-outline-border-color: var(--clr-badge-light-blue-outline-border-color) !default;
+$clr-badge-light-blue-outline-color: var(--clr-badge-light-blue-outline-color) !default;
+
+$badge-colors: (
+  gray: (
+    bg-color: $clr-badge-gray-bg-color,
+    border-color: $clr-badge-gray-border-color,
+    color: $clr-badge-gray-color,
+    outline-bg-color: $clr-badge-gray-outline-bg-color,
+    outline-border-color: $clr-badge-gray-outline-border-color,
+    outline-color: $clr-badge-gray-outline-color,
+  ),
+  purple: (
+    bg-color: $clr-badge-purple-bg-color,
+    border-color: $clr-badge-purple-border-color,
+    color: $clr-badge-purple-color,
+    outline-bg-color: $clr-badge-purple-outline-bg-color,
+    outline-border-color: $clr-badge-purple-outline-border-color,
+    outline-color: $clr-badge-purple-outline-color,
+  ),
+  blue: (
+    bg-color: $clr-badge-blue-bg-color,
+    border-color: $clr-badge-blue-border-color,
+    color: $clr-badge-blue-color,
+    outline-bg-color: $clr-badge-blue-outline-bg-color,
+    outline-border-color: $clr-badge-blue-outline-border-color,
+    outline-color: $clr-badge-blue-outline-color,
+  ),
+  orange: (
+    bg-color: $clr-badge-orange-bg-color,
+    border-color: $clr-badge-orange-border-color,
+    color: $clr-badge-orange-color,
+    outline-bg-color: $clr-badge-orange-outline-bg-color,
+    outline-border-color: $clr-badge-orange-outline-border-color,
+    outline-color: $clr-badge-orange-outline-color,
+  ),
+  light-blue: (
+    bg-color: $clr-badge-light-blue-bg-color,
+    border-color: $clr-badge-light-blue-border-color,
+    color: $clr-badge-light-blue-color,
+    outline-bg-color: $clr-badge-light-blue-outline-bg-color,
+    outline-border-color: $clr-badge-light-blue-outline-border-color,
+    outline-color: $clr-badge-light-blue-outline-color,
+  ),
+  success: (
+    bg-color: $clr-badge-success-bg-color,
+    border-color: $clr-badge-success-border-color,
+    color: $clr-badge-success-color,
+    outline-bg-color: $clr-badge-success-outline-bg-color,
+    outline-border-color: $clr-badge-success-outline-border-color,
+    outline-color: $clr-badge-success-outline-color,
+  ),
+  warning: (
+    bg-color: $clr-badge-warning-bg-color,
+    border-color: $clr-badge-warning-border-color,
+    color: $clr-badge-warning-color,
+    outline-bg-color: $clr-badge-warning-outline-bg-color,
+    outline-border-color: $clr-badge-warning-outline-border-color,
+    outline-color: $clr-badge-warning-outline-color,
+  ),
+  danger: (
+    bg-color: $clr-badge-danger-bg-color,
+    border-color: $clr-badge-danger-border-color,
+    color: $clr-badge-danger-color,
+    outline-bg-color: $clr-badge-danger-outline-bg-color,
+    outline-border-color: $clr-badge-danger-outline-border-color,
+    outline-color: $clr-badge-danger-outline-color,
+  ),
+  info: (
+    bg-color: $clr-badge-info-bg-color,
+    border-color: $clr-badge-info-border-color,
+    color: $clr-badge-info-color,
+    outline-bg-color: $clr-badge-info-outline-bg-color,
+    outline-border-color: $clr-badge-info-outline-border-color,
+    outline-color: $clr-badge-info-outline-color,
+  ),
+);

package/emphasis/label/_labels.clarity.scss

@@ -0,0 +1,175 @@
+/*
+ * 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 'sass:map';
+@use '../../styles/mixins';
+@use '../badge/variables.badges' as badges-variables;
+@use 'variables.label' as label-variables;
+@use 'mixins.label' as label-mixins;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.label');
+@include mixins.exports('labels.clarity') {
+  //NOTE: Had to use inline-flex, reset line-height to normal, and had to use change a few values
+  //instead of using our baselineRem function. This was done to achieve the desired look
+  //and to align this with our vertical baseline. Not sure why but aligning inline-blocks within inline-blocks
+  //is a bit tricky. I initially used display: inline-block but I wasn't able to align the labels properly.
+  .label,
+  a.label {
+    //default
+
+    @include mixins.generate-typography-token('CAPTION-LG-11-CPT');
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: density.$clr-base-gap-xs;
+    padding: density.$clr-base-vertical-offset-2xs calc(density.$clr-base-horizontal-offset-xs * 2);
+    border: label-variables.$clr-label-borderwidth solid label-variables.$clr-label-default-border-color;
+    border-radius: density.$clr-base-border-radius-xl;
+    min-height: density.$clr-base-row-height-s;
+    margin: 0 density.$clr-base-horizontal-offset-s density.$clr-base-vertical-offset-2xs 0;
+    white-space: nowrap;
+    color: label-variables.$clr-label-font-color;
+    text-decoration: none;
+
+    &.solid {
+      border-color: label-variables.$clr-label-default-solid-border-color;
+      background-color: label-variables.$clr-label-default-solid-bg-color;
+      color: label-variables.$clr-label-font-solid-color;
+
+      & > .badge {
+        border-color: badges-variables.$clr-badge-outline-border-color;
+        background-color: badges-variables.$clr-badge-outline-bg-color;
+        color: badges-variables.$clr-badge-outline-color;
+      }
+    }
+
+    // Set lower padding size if there is a badge or icon in the start / end of a label.
+    &:has(> .badge:first-child),
+    &:has(> cds-icon:first-child),
+    &:has(> clr-icon:first-child) {
+      padding-left: density.$clr-base-horizontal-offset-xs;
+    }
+
+    &:has(> .badge:last-child),
+    &:has(> cds-icon:last-child),
+    &:has(> clr-icon:last-child) {
+      padding-right: density.$clr-base-horizontal-offset-xs;
+    }
+
+    .badge,
+    cds-icon,
+    clr-icon {
+      margin: 0;
+      text-decoration: none;
+    }
+
+    cds-icon,
+    clr-icon {
+      &:not([size]) {
+        @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+      }
+    }
+
+    &.clickable:not(:has(.text)) {
+      text-decoration: underline;
+    }
+
+    &.clickable > .text {
+      text-decoration: underline;
+    }
+
+    &:visited {
+      color: label-variables.$clr-label-font-color;
+
+      cds-icon,
+      clr-icon {
+        color: label-variables.$clr-label-font-color;
+      }
+    }
+
+    &:focus,
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+
+    &.clickable:not(.disabled) {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: none;
+        background: label-variables.$clr-label-bg-hover-color;
+        color: label-variables.$clr-label-hover-color;
+
+        & > .badge {
+          border-color: badges-variables.$clr-badge-border-color;
+          background-color: badges-variables.$clr-badge-background-color;
+          color: badges-variables.$clr-badge-color;
+        }
+
+        cds-icon,
+        clr-icon {
+          color: label-variables.$clr-label-hover-color;
+        }
+      }
+
+      &:active {
+        color: label-variables.$clr-label-active-color;
+        background: label-variables.$clr-label-bg-active-color;
+        transform: translateY(tokens.$cds-global-space-2);
+
+        & > .badge {
+          border-color: badges-variables.$clr-badge-border-color;
+          background-color: badges-variables.$clr-badge-background-color;
+          color: badges-variables.$clr-badge-color;
+        }
+
+        cds-icon,
+        clr-icon {
+          color: label-variables.$clr-label-active-color;
+        }
+      }
+    }
+
+    @include label-mixins.generateLabelStyles(gray, 1);
+    @include label-mixins.generateLabelStyles(purple, 2);
+    @include label-mixins.generateLabelStyles(blue, 3);
+    @include label-mixins.generateLabelStyles(orange, 4);
+    @include label-mixins.generateLabelStyles(light-blue, 5);
+    @include label-mixins.generateLabelStyles(info);
+    @include label-mixins.generateLabelStyles(success);
+    @include label-mixins.generateLabelStyles(warning);
+    @include label-mixins.generateLabelStyles(danger);
+
+    & > .badge {
+      margin: 0;
+    }
+
+    &.disabled,
+    &:disabled {
+      cursor: not-allowed;
+      background: label-variables.$clr-label-bg-disabled-color;
+      color: label-variables.$clr-label-disabled-color;
+      border-color: label-variables.$clr-label-disabled-border-color;
+
+      cds-icon,
+      clr-icon {
+        color: label-variables.$clr-label-disabled-color;
+      }
+
+      .badge {
+        background: label-variables.$clr-label-disabled-color;
+        border-color: label-variables.$clr-label-disabled-color;
+        color: label-variables.$clr-label-bg-disabled-color;
+      }
+    }
+  }
+}

package/emphasis/label/_mixins.label.scss

@@ -0,0 +1,76 @@
+/*
+ * 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 '../badge/variables.badges' as badges-variables;
+@use 'variables.label' as label-variables;
+
+@mixin buildLabelStyles($colors, $badge-colors) {
+  background-color: map.get($colors, bg-color);
+  border: label-variables.$clr-label-borderwidth solid map.get($colors, border-color);
+  color: map.get($colors, color);
+
+  & > .badge {
+    border-color: map.get($badge-colors, border-color);
+    background-color: map.get($badge-colors, bg-color);
+    color: map.get($badge-colors, color);
+  }
+
+  cds-icon,
+  clr-icon {
+    color: map.get($colors, color);
+  }
+
+  &.clickable:not(.disabled):hover,
+  &.clickable:not(.disabled):active {
+    border-color: map.get($colors, border-color);
+
+    & > .badge {
+      border-color: map.get($badge-colors, border-color);
+      background-color: map.get($badge-colors, bg-color);
+      color: map.get($badge-colors, color);
+    }
+  }
+
+  &.solid {
+    border-color: map.get($colors, solid-border-color);
+    background-color: map.get($colors, solid-bg-color);
+    color: map.get($colors, solid-color);
+
+    &.clickable:not(.disabled, :active, :hover) > .badge {
+      border-color: map.get($badge-colors, outline-border-color);
+      background-color: map.get($badge-colors, outline-bg-color);
+      color: map.get($badge-colors, outline-color);
+    }
+
+    &.clickable:active > .badge,
+    &.clickable:hover > .badge {
+      border-color: map.get($badge-colors, border-color);
+      background-color: map.get($badge-colors, bg-color);
+      color: map.get($badge-colors, color);
+    }
+
+    cds-icon,
+    clr-icon {
+      color: map.get($colors, solid-color);
+    }
+  }
+}
+@mixin generateLabelStyles($color: gray, $alias: null) {
+  $colors: map.get(label-variables.$label-colors, $color);
+  $badge-colors: map.get(badges-variables.$badge-colors, $color);
+
+  &.label-#{'' + $color} {
+    @include buildLabelStyles($colors, $badge-colors);
+  }
+
+  @if ($alias) {
+    &.label-#{$alias} {
+      @include buildLabelStyles($colors, $badge-colors);
+    }
+  }
+}