@rossigee/clarity-ui 18.2.1-fixed

package/progress/progress-bars/_progress-bars.clarity.scss

@@ -0,0 +1,616 @@
+/*
+ * 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 'utils/mixins.clarity';
+@use '../../styles/mixins' as utils-mixins;
+@use '../../layout/variables.card' as card-variables;
+@use 'variables.progress-bars' as progress-bars-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.progress-bars');
+@include utils-mixins.exports('progress-bars.clarity') {
+  // KEY POINTS TO NOTE:
+  // - Firefox does not handle transitions on progress bars yet. So the movement
+  //   of the progress bar is going to be choppy if it's not indeterminate.
+
+  // - When browsers allow us control over the styling and animating of the HTML5
+  //   progress bars, we can get rid of the container and do all our styling 100%
+  //   on the progress element.
+
+  // - The concept of a static progress bar fits better with the idea of the HTML5
+  //   meter element. Sadly there's very little support for this element. When the
+  //   element is finally adopted, we should consider converting static progress
+  //   bars to meters and introducing a meter component.
+
+  .progress,
+  .progress-static {
+    background-color: transparent;
+    border-radius: 0;
+    font-size: inherit;
+    height: density.$clr-base-progress-bar-height;
+    margin: 0;
+    overflow: hidden;
+    max-height: density.$clr-base-progress-bar-height;
+    min-height: density.$clr-base-layout-space-2xs;
+    display: block;
+    width: 100%;
+  }
+
+  // lame, i know. but this is the only way to override progress default stylings
+  // without defining `progress.progress` as our selector. something weird about
+  // how browsers define these styles internally.
+  .progress {
+    > progress {
+      @include utils-mixins.clr-appearance-normal();
+      @include mixins.clr-progress-color(progress-bars-variables.$clr-progress-default-color);
+
+      display: block;
+      background-color: progress-bars-variables.$clr-progress-bg-color;
+      border: none;
+
+      @include utils-mixins.equilateral(100%);
+
+      &[value='0']::-moz-progress-bar {
+        // Firefox doesn't allow transition or animation on the progress bar. So it's going to be jumpy for now.
+
+        @include utils-mixins.clr-appearance-normal();
+
+        color: progress-bars-variables.$clr-progress-bg-color; // why us this using bg color
+        min-width: density.$clr-base-layout-space-3xl;
+        background-color: transparent;
+        background-image: none;
+      }
+
+      &[value='0']::-webkit-progress-value {
+        // Prevent transition when resetting back to zero.
+        transition: none;
+      }
+
+      &::-webkit-progress-bar {
+        border-radius: 0;
+        background-color: progress-bars-variables.$clr-progress-bg-color;
+      }
+
+      &::-webkit-progress-inner-element {
+        @include utils-mixins.clr-appearance-normal();
+      }
+
+      &::-webkit-progress-value {
+        transition: width 0.23s ease-in;
+        border-radius: 0;
+      }
+    }
+  }
+
+  // Variations
+  .progress {
+    // @deprecated in 3.0
+
+    /* warning, success, and danger distinctions for progress bars are deprecated in 3.0 */
+
+    @each $type, $color in (success, progress-bars-variables.$clr-progress-success-color),
+      (warning, progress-bars-variables.$clr-progress-warning-color),
+      (danger, progress-bars-variables.$clr-progress-danger-color)
+    {
+      &.#{$type} > progress {
+        @include mixins.clr-progress-color($color);
+      }
+    }
+  }
+
+  // Labeled
+  .progress,
+  .progress-static {
+    &.labeled {
+      // ems are used here because we want the label to be relative to its parent's
+      // font-sizes. if we used rems we would have to have many, many different
+      // sizes of labels.
+      position: relative;
+      padding-right: tokens.$cds-global-space-11;
+      color: progress-bars-variables.$clr-progress-label-color;
+
+      // We have to use this span hack because browsers (Firefox, Safari) do
+      // not currently support using either the :before or :after pseudoelements on
+      // the progress element.
+      // When that support happens (one day), we can remove both the progress container
+      // div and the need for this span. Right now, both are necessary to overcome
+      // shortcomings in browser support.
+      & > span {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-top: 0;
+
+        @include utils-mixins.generate-typography-token('CAPTION-LG-11-CPT');
+      }
+    }
+
+    &.compact:not(.labeled) {
+      height: density.$clr-base-layout-space-2xs;
+    }
+
+    &.compact.labeled > .progress-meter {
+      height: density.$clr-base-layout-space-2xs;
+      top: density.$clr-base-vertical-offset-xs;
+    }
+  }
+
+  @keyframes clr-progress-fade {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  .progress.progress-fade > progress[value='100'] {
+    &,
+    & + span {
+      animation: clr-progress-fade 0.3s linear 0.5s forwards;
+    }
+  }
+
+  $clr-progress-flashTiming: 0.1s;
+  $clr-progress-transition:
+    width 0.23s ease-in,
+    background-color $clr-progress-flashTiming ease-out 0.3s;
+
+  %clr-progress-animatedTransition {
+    &::-webkit-progress-value {
+      transition: $clr-progress-transition;
+    }
+
+    &[value='0']::-webkit-progress-value {
+      // Prevent transition when resetting back to zero.
+      transition: none;
+    }
+
+    &::-moz-progress-bar {
+      transition: $clr-progress-transition;
+    }
+  }
+
+  /* flash progress bars are deprecated in 3.0 */
+  .progress.flash > progress {
+    @extend %clr-progress-animatedTransition;
+
+    &[value='100'] {
+      @include mixins.clr-progress-color(progress-bars-variables.$clr-progress-success-color);
+    }
+  }
+
+  /* flash progress bars are deprecated in 3.0 */
+  .progress.progress-fade.flash > progress[value='100'] {
+    &,
+    & + span {
+      animation: clr-progress-fade 0.6s linear 1s forwards;
+    }
+  }
+
+  /* flash-danger progress bars are deprecated in 3.0 */
+  .progress.flash-danger > progress {
+    @extend %clr-progress-animatedTransition;
+
+    &[value='100'] {
+      @include mixins.clr-progress-color(progress-bars-variables.$clr-progress-danger-color);
+    }
+  }
+
+  // Indeterminate/Looping Progress Bars
+
+  @keyframes clr-progress-looper {
+    from {
+      left: -100%;
+    }
+
+    to {
+      left: 100%;
+    }
+  }
+
+  .progress.loop {
+    position: relative;
+
+    & > progress {
+      overflow: hidden;
+
+      @include mixins.clr-progress-color(transparent);
+
+      &::-moz-progress-bar {
+        background-color: transparent;
+      }
+    }
+
+    // by default, looping progress bars cannot be labeled.
+    &::after {
+      animation: clr-progress-looper 2s ease-in-out infinite;
+      content: ' ';
+      top: 0;
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      display: block;
+      background-color: progress-bars-variables.$clr-progress-default-color;
+      width: 50%;
+    }
+
+    &.danger::after {
+      background-color: progress-bars-variables.$clr-progress-danger-color;
+    }
+
+    &.warning::after {
+      background-color: progress-bars-variables.$clr-progress-warning-color;
+    }
+
+    &.success::after {
+      background-color: progress-bars-variables.$clr-progress-success-color;
+    }
+  }
+
+  .progress-static {
+    position: relative;
+    border: none;
+    width: 100%;
+
+    // by default, looping progress bars cannot be labeled.
+    & > .progress-meter {
+      background-color: progress-bars-variables.$clr-progress-bg-color;
+      display: block;
+      position: absolute;
+      inset: 0;
+
+      &::before {
+        background-color: progress-bars-variables.$clr-progress-default-color;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+        width: 0;
+        content: ' ';
+      }
+
+      &[data-value='1'],
+      &[data-value='2'],
+      &[data-value='3'] {
+        &::before {
+          width: 2%;
+        }
+      }
+
+      &[data-value='4'],
+      &[data-value='5'],
+      &[data-value='6'],
+      &[data-value='7'] {
+        &::before {
+          width: 5%;
+        }
+      }
+
+      &[data-value='8'],
+      &[data-value='9'],
+      &[data-value='10'],
+      &[data-value='11'],
+      &[data-value='12'] {
+        &::before {
+          width: 10%;
+        }
+      }
+
+      &[data-value='13'],
+      &[data-value='14'],
+      &[data-value='15'],
+      &[data-value='16'],
+      &[data-value='17'] {
+        &::before {
+          width: 15%;
+        }
+      }
+
+      &[data-value='18'],
+      &[data-value='19'],
+      &[data-value='20'],
+      &[data-value='21'],
+      &[data-value='22'] {
+        &::before {
+          width: 20%;
+        }
+      }
+
+      &[data-value='23'],
+      &[data-value='24'],
+      &[data-value='25'],
+      &[data-value='26'],
+      &[data-value='27'] {
+        &::before {
+          width: 25%;
+        }
+      }
+
+      &[data-value='28'],
+      &[data-value='29'],
+      &[data-value='30'],
+      &[data-value='31'],
+      &[data-value='32'] {
+        &::before {
+          width: 30%;
+        }
+      }
+
+      &[data-value='33'],
+      &[data-value='34'],
+      &[data-value='35'],
+      &[data-value='36'],
+      &[data-value='37'] {
+        &::before {
+          width: 35%;
+        }
+      }
+
+      &[data-value='38'],
+      &[data-value='39'],
+      &[data-value='40'],
+      &[data-value='41'],
+      &[data-value='42'] {
+        &::before {
+          width: 40%;
+        }
+      }
+
+      &[data-value='43'],
+      &[data-value='44'],
+      &[data-value='45'],
+      &[data-value='46'],
+      &[data-value='47'] {
+        &::before {
+          width: 45%;
+        }
+      }
+
+      &[data-value='48'],
+      &[data-value='49'],
+      &[data-value='50'],
+      &[data-value='51'],
+      &[data-value='52'] {
+        &::before {
+          width: 50%;
+        }
+      }
+
+      &[data-value='53'],
+      &[data-value='54'],
+      &[data-value='55'],
+      &[data-value='56'],
+      &[data-value='57'] {
+        &::before {
+          width: 55%;
+        }
+      }
+
+      &[data-value='58'],
+      &[data-value='59'],
+      &[data-value='60'],
+      &[data-value='61'],
+      &[data-value='62'] {
+        &::before {
+          width: 60%;
+        }
+      }
+
+      &[data-value='63'],
+      &[data-value='64'],
+      &[data-value='65'],
+      &[data-value='66'],
+      &[data-value='67'] {
+        &::before {
+          width: 65%;
+        }
+      }
+
+      &[data-value='68'],
+      &[data-value='69'],
+      &[data-value='70'],
+      &[data-value='71'],
+      &[data-value='72'] {
+        &::before {
+          width: 70%;
+        }
+      }
+
+      &[data-value='73'],
+      &[data-value='74'],
+      &[data-value='75'],
+      &[data-value='76'],
+      &[data-value='77'] {
+        &::before {
+          width: 75%;
+        }
+      }
+
+      &[data-value='78'],
+      &[data-value='79'],
+      &[data-value='80'],
+      &[data-value='81'],
+      &[data-value='82'] {
+        &::before {
+          width: 80%;
+        }
+      }
+
+      &[data-value='83'],
+      &[data-value='84'],
+      &[data-value='85'],
+      &[data-value='86'],
+      &[data-value='87'] {
+        &::before {
+          width: 85%;
+        }
+      }
+
+      &[data-value='88'],
+      &[data-value='89'],
+      &[data-value='90'],
+      &[data-value='91'],
+      &[data-value='92'] {
+        &::before {
+          width: 90%;
+        }
+      }
+
+      &[data-value='93'],
+      &[data-value='94'],
+      &[data-value='95'],
+      &[data-value='96'] {
+        &::before {
+          width: 95%;
+        }
+      }
+
+      &[data-value='97'],
+      &[data-value='98'],
+      &[data-value='99'] {
+        &::before {
+          width: 98%;
+        }
+      }
+
+      &[data-value='100']::before {
+        width: 100%;
+      }
+    }
+
+    &.labeled > .progress-meter {
+      right: tokens.$cds-global-space-11;
+    }
+
+    /* warning, success, and danger distinctions for progress bars are deprecated in 3.0 */
+
+    @each $type, $color in (success, progress-bars-variables.$clr-progress-success-color),
+      (warning, progress-bars-variables.$clr-progress-warning-color),
+      (danger, progress-bars-variables.$clr-progress-danger-color)
+    {
+      &.#{$type} > .progress-meter::before {
+        background-color: $color;
+      }
+    }
+  }
+
+  // Inside Cards
+  .card-block,
+  .card-footer {
+    $clr-progressInCard-height: density.$clr-base-layout-space-2xs;
+
+    .progress,
+    .progress-static {
+      height: $clr-progressInCard-height;
+      position: absolute;
+      left: 0;
+
+      // by default, positioned at the topmost of its card-block container
+      margin: calc(-1 * density.$clr-base-vertical-offset-m) 0 0;
+
+      &.top {
+        // places progress bar at the top of a card
+        margin-top: 0;
+        top: 0;
+
+        // ATM During card shim removal. Set proper tokens.
+        border-top-left-radius: card-variables.$clr-card-border-radius;
+        border-top-right-radius: card-variables.$clr-card-border-radius;
+      }
+    }
+
+    .progress > progress,
+    .progress-static > .progress-meter {
+      height: $clr-progressInCard-height;
+      position: absolute;
+    }
+  }
+
+  // Progress blocks, a.k.a. inline progress bars
+  .progress-block {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    color: progress-bars-variables.$clr-progress-label-color;
+
+    @include utils-mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+    & > * {
+      flex: 0 0 auto;
+      padding-right: density.$clr-base-horizontal-offset-l;
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    & > label,
+    & > span {
+      max-width: 33%;
+    }
+
+    & > .progress,
+    & > .progress-static {
+      flex: 0 1 auto;
+    }
+
+    & > .progress-group {
+      flex-direction: column;
+      height: auto;
+      flex: 0 1 auto;
+      display: flex;
+      width: 100%;
+
+      .clr-row {
+        margin-left: 0;
+        margin-right: 0;
+        color: progress-bars-variables.$clr-progress-label-color;
+
+        @include utils-mixins.generate-typography-token('CAPTION-LG-11-CPT');
+
+        & > [class*='clr-col-'] {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  $clr-progress-in-card-height: density.$clr-base-layout-space-s;
+
+  .card-block .progress-block {
+    margin-bottom: density.$clr-base-vertical-offset-xl;
+    padding: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    & > label {
+      max-width: 33%;
+    }
+
+    .progress,
+    .progress-static {
+      position: relative;
+      height: $clr-progress-in-card-height;
+      margin-top: 0;
+
+      & > progress,
+      & > .progress-meter {
+        height: $clr-progress-in-card-height;
+      }
+    }
+  }
+}

package/progress/progress-bars/_properties.progress-bars.scss

@@ -0,0 +1,24 @@
+/*
+ * 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('progress.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [cds-theme] {
+      // Usage: ../progress/progress-bars/_progress-bars.clarity.scss
+      --clr-progress-default-color: #{tokens.$cds-alias-status-info}; // blue
+      --clr-progress-alt-color-1: #{tokens.$cds-alias-status-success}; // green
+      --clr-progress-alt-color-2: #{tokens.$cds-alias-status-danger-shade}; // red
+      --clr-progress-alt-color-3: #{tokens.$cds-alias-status-warning}; // yellow
+      --clr-progress-bg-color: #{tokens.$cds-alias-object-container-background-shade};
+      --clr-progress-label-color: #{tokens.$cds-alias-typography-color-400};
+    }
+  }
+}

package/progress/progress-bars/_variables.progress-bars.scss

@@ -0,0 +1,15 @@
+/*
+ * 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: ../progress/progress-bars/_progress-bars.clarity.scss
+$clr-progress-default-color: var(--clr-progress-default-color) !default;
+$clr-progress-success-color: var(--clr-progress-alt-color-1) !default;
+$clr-progress-danger-color: var(--clr-progress-alt-color-2) !default;
+$clr-progress-warning-color: var(--clr-progress-alt-color-3) !default;
+
+$clr-progress-bg-color: var(--clr-progress-bg-color) !default;
+
+$clr-progress-label-color: var(--clr-progress-label-color) !default;

package/progress/progress-bars/utils/_mixins.clarity.scss

@@ -0,0 +1,18 @@
+/*
+ * 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.progress-bars' as progress-bars-variables;
+
+@mixin clr-progress-color($color: progress-bars-variables.$clr-progress-default-color) {
+  &::-webkit-progress-value {
+    background-color: $color;
+  }
+
+  &::-moz-progress-bar {
+    background-color: $color;
+  }
+}

package/progress/spinner/_mixins.spinner.scss

@@ -0,0 +1,30 @@
+/*
+ * 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';
+
+@mixin spinner-size-before-after($spinner-size, $stroke-width-size) {
+  &::before,
+  &::after {
+    @include mixins.min-equilateral($spinner-size);
+
+    border-width: $stroke-width-size;
+  }
+
+  @include mixins.min-equilateral($spinner-size);
+}
+@mixin spinner-color-before-after($fill-color, $tail-color) {
+  &::before {
+    border-color: $tail-color;
+  }
+
+  &::after {
+    border-color: $fill-color;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+  }
+}