@rossigee/clarity-ui 18.2.1-fixed

package/accordion/_accordion.clarity.scss

@@ -0,0 +1,81 @@
+/*
+ * 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.accordion' as accordion-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../collapsible-panel/mixins.collapsible-panel' as collapsible-panel;
+
+@include meta.load-css('properties.accordion');
+@include mixins.exports('accordion.clarity') {
+  @include collapsible-panel.collapsible-panel('clr-accordion', accordion-variables.$clr-accordion-theme...);
+
+  .clr-accordion {
+    display: block;
+    margin-bottom: density.$clr-base-vertical-offset-xl;
+
+    .clr-accordion-panel .clr-accordion-header {
+      border-radius: accordion-variables.$clr-accordion-border-radius;
+
+      & + .clr-accordion-content-region > .clr-accordion-content {
+        border-bottom-left-radius: accordion-variables.$clr-accordion-border-radius;
+        border-bottom-right-radius: accordion-variables.$clr-accordion-border-radius;
+      }
+    }
+
+    .clr-accordion-panel + .clr-accordion-panel > div[class*='clr-accordion-panel-'] > .clr-accordion-header {
+      border-top-left-radius: unset;
+      border-top-right-radius: unset;
+    }
+
+    .clr-accordion-panel:not(:last-child) > div[class*='clr-accordion-panel-'] > .clr-accordion-header {
+      &,
+      & + .clr-accordion-content-region > .clr-accordion-content {
+        border-bottom-left-radius: unset;
+        border-bottom-right-radius: unset;
+      }
+    }
+
+    .clr-accordion-panel-open > .clr-accordion-header {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .clr-accordion-header-button {
+      align-items: center;
+      padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-l;
+    }
+
+    .clr-accordion-inner-content {
+      padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-l
+        density.$clr-base-vertical-offset-m
+        calc(
+          density.$clr-base-horizontal-offset-l + density.$clr-base-icon-size-s + density.$clr-base-horizontal-offset-m
+        );
+      color: accordion-variables.$clr-accordion-content-color;
+
+      @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+    }
+
+    .clr-accordion-panel-disabled .clr-accordion-inner-content {
+      color: accordion-variables.$clr-accordion-panel-disabled-color;
+      cursor: not-allowed;
+    }
+
+    .clr-accordion-status {
+      width: auto;
+
+      cds-icon,
+      clr-icon {
+        &:not([size]) {
+          @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+        }
+      }
+    }
+  }
+}

package/accordion/_properties.accordion.scss

@@ -0,0 +1,45 @@
+/*
+ * 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';
+
+// The base collapsible-panel properties are loaded first. Accordion properties
+// alias them so consumers can override per-component via --clr-accordion-* or
+// globally via --clr-collapsible-panel-*. The base mixin styles resolve
+// --clr-collapsible-panel-* directly; accordion-only styles use --clr-accordion-*.
+@include meta.load-css('../collapsible-panel/properties.collapsible-panel');
+@include mixins.exports('accordion.properties') {
+  @include mixins.root-or-host() {
+    &,
+    [cds-theme] {
+      --clr-accordion-text-color: var(--clr-collapsible-panel-text-color);
+      --clr-accordion-text-color-hover: var(--clr-collapsible-panel-text-color-hover);
+      --clr-accordion-text-color-active: var(--clr-collapsible-panel-text-color-active);
+      --clr-accordion-panel-disabled-color: var(--clr-collapsible-panel-panel-disabled-color);
+      --clr-accordion-content-background-color: var(--clr-collapsible-panel-content-background-color);
+      --clr-accordion-content-color: var(--clr-collapsible-panel-content-color);
+      --clr-accordion-header-background-color: var(--clr-collapsible-panel-header-background-color);
+      --clr-accordion-header-disabled-background-color: var(--clr-collapsible-panel-header-disabled-background-color);
+      --clr-accordion-header-hover-background-color: var(--clr-collapsible-panel-header-hover-background-color);
+      --clr-accordion-header-active-background-color: var(--clr-collapsible-panel-header-active-background-color);
+      --clr-accordion-header-open-background-color: var(--clr-collapsible-panel-header-open-background-color);
+      --clr-accordion-header-open-active-background-color: var(
+        --clr-collapsible-panel-header-open-active-background-color
+      );
+      --clr-accordion-header-open-hover-background-color: var(
+        --clr-collapsible-panel-header-open-hover-background-color
+      );
+      --clr-accordion-border-color: var(--clr-collapsible-panel-border-color);
+    }
+
+    &,
+    [clr-density] {
+      --clr-accordion-border-radius: var(--clr-collapsible-panel-border-radius);
+    }
+  }
+}

package/accordion/_variables.accordion.scss

@@ -0,0 +1,91 @@
+/*
+ * 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 '../collapsible-panel/variables.collapsible-panel' as panel-variables;
+
+$clr-accordion-text-color: var(
+  --clr-accordion-text-color,
+  #{panel-variables.$clr-collapsible-panel-text-color}
+) !default;
+$clr-accordion-text-color-hover: var(
+  --clr-accordion-text-color-hover,
+  #{panel-variables.$clr-collapsible-panel-text-color-hover}
+) !default;
+$clr-accordion-text-color-active: var(
+  --clr-accordion-text-color-active,
+  #{panel-variables.$clr-collapsible-panel-text-color-active}
+) !default;
+$clr-accordion-panel-disabled-color: var(
+  --clr-accordion-panel-disabled-color,
+  #{panel-variables.$clr-collapsible-panel-panel-disabled-color}
+) !default;
+$clr-accordion-content-background-color: var(
+  --clr-accordion-content-background-color,
+  #{panel-variables.$clr-collapsible-panel-content-background-color}
+) !default;
+$clr-accordion-header-background-color: var(
+  --clr-accordion-header-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-background-color}
+) !default;
+$clr-accordion-header-disabled-background-color: var(
+  --clr-accordion-header-disabled-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-disabled-background-color}
+) !default;
+$clr-accordion-header-hover-background-color: var(
+  --clr-accordion-header-hover-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-hover-background-color}
+) !default;
+$clr-accordion-header-active-background-color: var(
+  --clr-accordion-header-active-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-active-background-color}
+) !default;
+$clr-accordion-header-open-background-color: var(
+  --clr-accordion-header-open-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-open-background-color}
+) !default;
+$clr-accordion-header-open-active-background-color: var(
+  --clr-accordion-header-open-active-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-open-active-background-color}
+) !default;
+$clr-accordion-header-open-hover-background-color: var(
+  --clr-accordion-header-open-hover-background-color,
+  #{panel-variables.$clr-collapsible-panel-header-open-hover-background-color}
+) !default;
+
+$clr-accordion-content-color: var(
+  --clr-accordion-content-color,
+  #{panel-variables.$clr-collapsible-panel-content-color}
+) !default;
+
+$clr-accordion-responsive-breakpoint: panel-variables.$clr-collapsible-panel-responsive-breakpoint !default;
+
+$clr-accordion-border-color: var(
+  --clr-accordion-border-color,
+  #{panel-variables.$clr-collapsible-panel-border-color}
+) !default;
+$clr-accordion-border-radius: var(
+  --clr-accordion-border-radius,
+  #{panel-variables.$clr-collapsible-panel-border-radius}
+) !default;
+
+$clr-accordion-theme: (
+  text-color: $clr-accordion-text-color,
+  text-color-hover: $clr-accordion-text-color-hover,
+  text-color-active: $clr-accordion-text-color-active,
+  panel-disabled-color: $clr-accordion-panel-disabled-color,
+  content-background-color: $clr-accordion-content-background-color,
+  header-background-color: $clr-accordion-header-background-color,
+  header-disabled-background-color: $clr-accordion-header-disabled-background-color,
+  header-hover-background-color: $clr-accordion-header-hover-background-color,
+  header-active-background-color: $clr-accordion-header-active-background-color,
+  header-open-background-color: $clr-accordion-header-open-background-color,
+  header-open-active-background-color: $clr-accordion-header-open-active-background-color,
+  header-open-hover-background-color: $clr-accordion-header-open-hover-background-color,
+  border-color: $clr-accordion-border-color,
+  content-color: $clr-accordion-content-color,
+  responsive-breakpoint: $clr-accordion-responsive-breakpoint,
+);

package/button/_buttons.clarity.scss

@@ -0,0 +1,374 @@
+/*
+ * 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 'mixins.buttons' as button-mixins;
+@use 'variables.buttons' as buttons-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.buttons');
+@include mixins.exports('buttons.clarity') {
+  .btn {
+    @include button-mixins.generateButton();
+    @include button-mixins.populateButtonProperties(default);
+    @include mixins.generate-typography-token('BUTTON-12');
+
+    height: buttons-variables.$clr-btn-appearance-form-height;
+    padding: buttons-variables.$clr-btn-appearance-form-padding;
+
+    .clr-loading-btn-content {
+      display: flex;
+      gap: buttons-variables.$clr-btn-gap;
+      align-items: center;
+    }
+  }
+
+  a.btn,
+  .btn.btn-secondary,
+  .btn-secondary .btn {
+    @include button-mixins.populateButtonProperties(default);
+  }
+
+  .btn.btn-info,
+  .btn-info .btn,
+  .btn.btn-primary,
+  .btn-primary .btn {
+    @include button-mixins.populateButtonProperties(primary);
+  }
+
+  .btn.btn-success,
+  .btn-success .btn {
+    @include button-mixins.populateButtonProperties(success);
+  }
+
+  .btn.btn-warning,
+  .btn-warning .btn {
+    @include button-mixins.populateButtonProperties(warning);
+  }
+
+  .btn.btn-danger,
+  .btn-danger .btn {
+    @include button-mixins.populateButtonProperties(danger);
+  }
+
+  .btn.btn-neutral,
+  .btn-neutral .btn {
+    @include button-mixins.populateButtonProperties(neutral);
+  }
+
+  .btn.btn-outline,
+  .btn.btn-outline .btn,
+  .btn.btn-secondary-outline,
+  .btn.btn-outline-secondary,
+  .btn-secondary-outline .btn,
+  .btn-outline-secondary .btn,
+  .btn-outline .btn {
+    @include button-mixins.populateButtonProperties(default-outline);
+  }
+
+  .btn.btn-primary-outline,
+  .btn-outline-info .btn,
+  .btn-info-outline .btn,
+  .btn-primary-outline .btn,
+  .btn-outline-primary .btn,
+  .btn.btn-outline-primary,
+  .btn.btn-outline-info,
+  .btn.btn-info-outline,
+  .btn.btn-info-outline {
+    @include button-mixins.populateButtonProperties(primary-outline);
+  }
+
+  .btn.btn-success-outline,
+  .btn.btn-outline-success,
+  .btn-success-outline .btn,
+  .btn-outline-success .btn {
+    @include button-mixins.populateButtonProperties(success-outline);
+  }
+
+  .btn.btn-warning-outline,
+  .btn.btn-outline-warning,
+  .btn-warning-outline .btn,
+  .btn-outline-warning .btn {
+    @include button-mixins.populateButtonProperties(warning-outline);
+  }
+
+  .btn.btn-danger-outline,
+  .btn.btn-outline-danger,
+  .btn-danger-outline .btn,
+  .btn-outline-danger .btn {
+    @include button-mixins.populateButtonProperties(danger-outline);
+  }
+
+  .btn.btn-neutral-outline,
+  .btn.btn-outline-neutral,
+  .btn-neutral-outline .btn,
+  .btn-outline-neutral .btn {
+    @include button-mixins.populateButtonProperties(neutral-outline);
+  }
+
+  .btn.btn-link,
+  .btn-link .btn {
+    @include button-mixins.populateButtonProperties(link);
+
+    //To override the visited state of anchor links styled as buttons
+    &:visited {
+      @include button-mixins.button-css-var(link, color, visited-color);
+
+      cds-icon,
+      clr-icon {
+        @include button-mixins.button-css-var(link, color, visited-color);
+      }
+
+      &:hover {
+        @include button-mixins.button-css-var(link, color, visited-hover-color);
+
+        cds-icon,
+        clr-icon {
+          @include button-mixins.button-css-var(link, color, visited-hover-color);
+        }
+      }
+    }
+  }
+
+  .btn.btn-link-primary,
+  .btn-link-primary .btn {
+    @include button-mixins.populateButtonProperties(link-primary);
+  }
+
+  .btn.btn-link-success,
+  .btn-link-success .btn {
+    @include button-mixins.populateButtonProperties(link-success);
+  }
+
+  .btn.btn-link-warning,
+  .btn-link-warning .btn {
+    @include button-mixins.populateButtonProperties(link-warning);
+  }
+
+  .btn.btn-link-danger,
+  .btn-link-danger .btn {
+    @include button-mixins.populateButtonProperties(link-danger);
+  }
+
+  .btn.btn-link-neutral,
+  .btn-link-neutral .btn {
+    @include button-mixins.populateButtonProperties(link-neutral);
+  }
+
+  .btn.btn-inverse,
+  .btn-inverse .btn {
+    @include button-mixins.populateButtonProperties(inverse);
+  }
+
+  .btn.btn-sm,
+  .btn-sm .btn {
+    @include button-mixins.btn-sm-appearance();
+  }
+
+  .btn-block {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .btn {
+    margin: buttons-variables.$clr-btn-vertical-margin buttons-variables.$clr-btn-horizontal-margin
+      buttons-variables.$clr-btn-vertical-margin 0;
+
+    &.btn-link {
+      margin-right: 0;
+    }
+
+    &.btn-link.btn-inverse {
+      border-color: transparent;
+    }
+  }
+
+  //Small Icon Button
+  .btn-sm:not(.btn-link) {
+    cds-icon,
+    clr-icon {
+      &:not([size]) {
+        height: buttons-variables.$clr-btn-appearance-standard-icon-size;
+        width: buttons-variables.$clr-btn-appearance-standard-icon-size;
+      }
+    }
+  }
+
+  .btn-icon {
+    min-width: 0;
+  }
+
+  //Overflow
+  .btn-group {
+    &.btn-link .dropdown-toggle {
+      @include button-mixins.populateButtonProperties(link);
+    }
+
+    &.btn-sm .btn-group-overflow > .dropdown-toggle {
+      @include button-mixins.btn-sm-appearance();
+    }
+  }
+
+  //Checkboxes styled as Buttons
+  //Radio Buttons styled as Buttons
+  .checkbox.btn,
+  .checkbox-inline.btn,
+  .radio.btn,
+  .radio-inline.btn {
+    padding: 0;
+
+    label {
+      @include button-mixins.btn-appearance();
+
+      padding: 0 density.$clr-base-horizontal-offset-l;
+    }
+
+    &.disabled label,
+    &:disabled label {
+      cursor: not-allowed;
+    }
+  }
+
+  .checkbox.btn,
+  .checkbox-inline.btn {
+    input[type='checkbox'] + label::before,
+    input[type='checkbox'] + label::after {
+      content: none;
+    }
+  }
+
+  .radio.btn,
+  .radio-inline.btn {
+    input[type='radio'] + label::before,
+    input[type='radio'] + label::after {
+      content: none;
+    }
+  }
+
+  .checkbox.btn,
+  .checkbox-inline.btn {
+    @include button-mixins.btn-checked-styles();
+
+    label {
+      width: 100%;
+    }
+
+    &.btn-secondary,
+    &.btn-info,
+    &.btn-outline,
+    &.btn-primary-outline,
+    &.btn-secondary-outline,
+    &.btn-outline-primary,
+    &.btn-outline-secondary,
+    &.btn-info-outline,
+    &.btn-outline-info {
+      @include button-mixins.btn-checked-styles();
+    }
+
+    &.btn-primary {
+      @include button-mixins.btn-checked-styles(primary);
+    }
+
+    &.btn-success {
+      @include button-mixins.btn-checked-styles(success);
+    }
+
+    &.btn-warning {
+      @include button-mixins.btn-checked-styles(warning);
+    }
+
+    &.btn-danger {
+      @include button-mixins.btn-checked-styles(danger);
+    }
+
+    &.btn-success-outline,
+    &.btn-outline-success {
+      @include button-mixins.btn-checked-styles(outline-success);
+    }
+
+    &.btn-danger-outline,
+    &.btn-outline-danger {
+      @include button-mixins.btn-checked-styles(outline-danger);
+    }
+
+    &.btn-warning-outline,
+    &.btn-outline-warning {
+      @include button-mixins.btn-checked-styles(outline-warning);
+    }
+
+    &.btn-link {
+      @include button-mixins.btn-checked-styles(link);
+    }
+
+    &.btn-inverse {
+      @include button-mixins.btn-checked-styles(inverse);
+    }
+  }
+
+  .radio.btn,
+  .radio.btn {
+    @include button-mixins.btn-checked-styles(default, radio);
+
+    label {
+      width: 100%;
+    }
+
+    &.btn-secondary,
+    &.btn-info,
+    &.btn-outline,
+    &.btn-primary-outline,
+    &.btn-secondary-outline,
+    &.btn-outline-primary,
+    &.btn-outline-secondary,
+    &.btn-info-outline,
+    &.btn-outline-info {
+      @include button-mixins.btn-checked-styles(default, radio);
+    }
+
+    &.btn-primary {
+      @include button-mixins.btn-checked-styles(primary, radio);
+    }
+
+    &.btn-success {
+      @include button-mixins.btn-checked-styles(success, radio);
+    }
+
+    &.btn-warning {
+      @include button-mixins.btn-checked-styles(warning, radio);
+    }
+
+    &.btn-danger {
+      @include button-mixins.btn-checked-styles(danger, radio);
+    }
+
+    &.btn-success-outline,
+    &.btn-outline-success {
+      @include button-mixins.btn-checked-styles(success-outline, radio);
+    }
+
+    &.btn-warning-outline,
+    &.btn-outline-warning {
+      @include button-mixins.btn-checked-styles(warning-outline, radio);
+    }
+
+    &.btn-danger-outline,
+    &.btn-outline-danger {
+      @include button-mixins.btn-checked-styles(danger-outline, radio);
+    }
+
+    &.btn-link {
+      @include button-mixins.btn-checked-styles(link, radio);
+    }
+
+    &.btn-inverse {
+      @include button-mixins.btn-checked-styles(inverse, radio);
+    }
+  }
+}