@rossigee/clarity-ui 18.2.1-fixed

package/typography/_typography.scss

@@ -0,0 +1,322 @@
+/*
+ * 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 'lists';
+@use 'code';
+@use '../styles/mixins';
+@use '../styles/variables/variables.typography';
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('typography.clarity') {
+  //Headings
+  h1:not([cds-text]) {
+    margin-top: variables.$clr-global-typography-margin-top;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-header-token(
+      'DISPLAY-40',
+      (
+        color: variables.$clr-h1-color,
+        font-family: variables.$clr-h1-font-family,
+        font-weight: variables.$clr-h1-font-weight,
+        font-size: variables.$clr-h1-font-size,
+        line-height: variables.$clr-h1-line-height,
+        letter-spacing: variables.$clr-h1-letter-spacing,
+      )
+    );
+  }
+
+  h2:not([cds-text]) {
+    margin-top: variables.$clr-global-typography-margin-top;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-header-token(
+      'HEADLINE-32',
+      (
+        color: variables.$clr-h2-color,
+        font-family: variables.$clr-h2-font-family,
+        font-weight: variables.$clr-h2-font-weight,
+        font-size: variables.$clr-h2-font-size,
+        line-height: variables.$clr-h2-line-height,
+        letter-spacing: variables.$clr-h2-letter-spacing,
+      )
+    );
+  }
+
+  h3:not([cds-text]) {
+    margin-top: variables.$clr-global-typography-margin-top;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-header-token(
+      'TITLE-24-EXP',
+      (
+        color: variables.$clr-h3-color,
+        font-family: variables.$clr-h3-font-family,
+        font-weight: variables.$clr-h3-font-weight,
+        font-size: variables.$clr-h3-font-size,
+        line-height: variables.$clr-h3-line-height,
+        letter-spacing: variables.$clr-h3-letter-spacing,
+      )
+    );
+  }
+
+  h4:not([cds-text]) {
+    margin-top: variables.$clr-global-typography-margin-top;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-header-token(
+      'SECTION-20-STD',
+      (
+        color: variables.$clr-h4-color,
+        font-family: variables.$clr-h4-font-family,
+        font-weight: variables.$clr-h4-font-weight,
+        font-size: variables.$clr-h4-font-size,
+        line-height: variables.$clr-h4-line-height,
+        letter-spacing: variables.$clr-h4-letter-spacing,
+      )
+    );
+  }
+
+  h5:not([cds-text]) {
+    margin-top: variables.$clr-global-typography-margin-top;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-header-token(
+      'SUBSECTION-16-EXP',
+      (
+        color: variables.$clr-h5-color,
+        font-family: variables.$clr-h5-font-family,
+        font-weight: variables.$clr-h5-font-weight,
+        font-size: variables.$clr-h5-font-size,
+        line-height: variables.$clr-h5-line-height,
+        letter-spacing: variables.$clr-h5-letter-spacing,
+      )
+    );
+  }
+
+  h6:not([cds-text]) {
+    margin-top: variables.$clr-global-typography-margin-top;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-header-token(
+      'MESSAGE-16-EXP',
+      (
+        color: variables.$clr-h6-color,
+        font-family: variables.$clr-h6-font-family,
+        font-weight: variables.$clr-h6-font-weight,
+        font-size: variables.$clr-h6-font-size,
+        line-height: variables.$clr-h6-line-height,
+        letter-spacing: variables.$clr-h6-letter-spacing,
+      )
+    );
+  }
+
+  //Body.
+  body:not([cds-text]) {
+    margin-top: 0 !important;
+    margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+    @include mixins.generate-typography-body-token(
+      'BODY-14-RG-STD',
+      (
+        color: variables.$clr-p1-color,
+        font-family: variables.$clr-body-font,
+        font-weight: variables.$clr-p1-font-weight,
+        font-size: variables.$clr-p1-font-size,
+        line-height: variables.$clr-p1-line-height,
+        letter-spacing: variables.$clr-p1-letter-spacing,
+      )
+    );
+  }
+
+  //Paragraph
+
+  // angular demos is injecting style selectors such as `p[_ngcontent-jfh-3]`
+  // that are overriding these styles. i'm using specificity below to try and force the issue.
+
+  body {
+    p:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'BODY-14-RG-STD',
+        (
+          color: variables.$clr-p1-color,
+          font-weight: variables.$clr-p1-font-weight,
+          font-size: variables.$clr-p1-font-size,
+          line-height: variables.$clr-p1-line-height,
+          letter-spacing: variables.$clr-p1-letter-spacing,
+        )
+      );
+    }
+
+    .p0:not([cds-text]),
+    p.p0:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'BODY-14-RG-STD',
+        (
+          color: variables.$clr-p0-color,
+          font-weight: variables.$clr-p0-font-weight,
+          font-size: variables.$clr-p0-font-size,
+          line-height: variables.$clr-p0-line-height,
+          letter-spacing: variables.$clr-p0-letter-spacing,
+        )
+      );
+    }
+
+    .p2:not([cds-text]),
+    p.p2:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'SECONDARY-13-MD-EXP',
+        (
+          color: variables.$clr-p2-color,
+          font-weight: variables.$clr-p2-font-weight,
+          font-size: variables.$clr-p2-font-size,
+          line-height: variables.$clr-p2-line-height,
+          letter-spacing: variables.$clr-p2-letter-spacing,
+        )
+      );
+    }
+
+    .p3:not([cds-text]),
+    p.p3:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'SECONDARY-13-RG-EXP',
+        (
+          color: variables.$clr-p3-color,
+          font-weight: variables.$clr-p3-font-weight,
+          font-size: variables.$clr-p3-font-size,
+          line-height: variables.$clr-p3-line-height,
+          letter-spacing: variables.$clr-p3-letter-spacing,
+        )
+      );
+    }
+
+    .p4:not([cds-text]),
+    p.p4:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'SECONDARY-13-SB-STD',
+        (
+          color: variables.$clr-p4-color,
+          font-weight: variables.$clr-p4-font-weight,
+          font-size: variables.$clr-p4-font-size,
+          line-height: variables.$clr-p4-line-height,
+          letter-spacing: variables.$clr-p4-letter-spacing,
+        )
+      );
+    }
+
+    .p5:not([cds-text]),
+    p.p5:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'SECONDARY-13-RG-EXP',
+        (
+          color: variables.$clr-p5-color,
+          font-weight: variables.$clr-p5-font-weight,
+          font-size: variables.$clr-p5-font-size,
+          line-height: variables.$clr-p5-line-height,
+          letter-spacing: variables.$clr-p5-letter-spacing,
+        )
+      );
+    }
+
+    .p6:not([cds-text]),
+    p.p6:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'CAPTION-LG-11-STD',
+        (
+          color: variables.$clr-p6-color,
+          font-weight: variables.$clr-p6-font-weight,
+          font-size: variables.$clr-p6-font-size,
+          line-height: variables.$clr-p6-line-height,
+          letter-spacing: variables.$clr-p6-letter-spacing,
+        )
+      );
+    }
+
+    .p7:not([cds-text]),
+    p.p7:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'CAPTION-SM-10',
+        (
+          color: variables.$clr-p7-color,
+          font-weight: variables.$clr-p7-font-weight,
+          font-size: variables.$clr-p7-font-size,
+          line-height: variables.$clr-p7-line-height,
+          letter-spacing: variables.$clr-p7-letter-spacing,
+        )
+      );
+    }
+
+    .p8:not([cds-text]),
+    p.p8:not([cds-text]) {
+      margin-top: variables.$clr-global-typography-margin-top;
+      margin-bottom: variables.$clr-global-typography-margin-bottom;
+
+      @include mixins.generate-typography-body-token(
+        'CAPTION-SM-10',
+        (
+          color: variables.$clr-p8-color,
+          font-weight: variables.$clr-p8-font-weight,
+          font-size: variables.$clr-p8-font-size,
+          line-height: variables.$clr-p8-line-height,
+          letter-spacing: variables.$clr-p8-letter-spacing,
+        )
+      );
+    }
+  }
+
+  .text-light {
+    font-weight: variables.$clr-font-weight-light;
+  }
+
+  .text-right {
+    text-align: right !important;
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-left {
+    text-align: left !important;
+  }
+
+  .text-justify {
+    text-align: justify !important;
+  }
+
+  //HTML
+  html:not([cds-text]) {
+    color: tokens.$cds-alias-typography-color-450;
+    font-family: variables.$clr-font;
+    // font-size should be deleted probably. Actual base comes from CDS reset file
+    font-size: calc((tokens.$cds-global-base / 16) * 100%);
+  }
+}

package/utils/animations/_animations.clarity.scss

@@ -0,0 +1,44 @@
+/*
+ * 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 'mixins.animations' as animation-mixins;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+$clr-animation-duration: #{tokens.$cds-global-animation-duration-quick};
+$clr-animation-easing: #{tokens.$cds-global-animation-easing-in-out};
+
+@include mixins.exports('animations.clarity') {
+  .fade {
+    opacity: 0;
+    transition: opacity $clr-animation-duration $clr-animation-easing;
+    will-change: opacity;
+
+    &.in {
+      opacity: 1;
+    }
+  }
+
+  .fadeDown {
+    opacity: 0;
+    transform: translate(0, -25%);
+    transition:
+      opacity $clr-animation-duration $clr-animation-easing,
+      transform $clr-animation-duration $clr-animation-easing;
+    will-change: opacity, transform;
+
+    &.in {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+
+  .skeleton-loading {
+    @include animation-mixins.skeleton-loading();
+  }
+}

package/utils/animations/_mixins.animations.scss

@@ -0,0 +1,33 @@
+/*
+ * 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/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@keyframes clr-skeleton-loading {
+  from {
+    background-position-x: 0;
+  }
+
+  to {
+    background-position-x: -200%;
+  }
+}
+
+@mixin skeleton-loading() {
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    border-radius: density.$clr-base-border-radius-s;
+    background: tokens.$cds-alias-object-skeleton-loading-gradient;
+    animation: tokens.$cds-global-animation-skeleton-duration clr-skeleton-loading
+      tokens.$cds-global-animation-easing-in-out infinite;
+    background-size: 200% 100%;
+  }
+}

package/wizard/_properties.wizard.scss

@@ -0,0 +1,53 @@
+/*
+ * 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('wizard.properties') {
+  @include mixins.root-or-host() {
+    --clr-wizard-footer-height: auto;
+
+    &,
+    & [clr-density] {
+      --clr-wizard-footer-vertical-space: #{density.$clr-base-vertical-offset-xl};
+      --clr-wizard-stepnav-border-size: #{density.$clr-base-layout-space-2xs};
+      --clr-wizard-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-wizard-main-bgcolor: #{tokens.$cds-alias-object-overlay-background};
+      --clr-wizard-main-text-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-wizard-stepnav-bgcolor: #{tokens.$cds-alias-object-interaction-background};
+      --clr-wizard-stepnav-text: #{tokens.$cds-alias-typography-color-400};
+      --clr-wizard-stepnav-text-active: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-wizard-stepnav-text-hover: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-wizard-stepnav-text-selected: #{tokens.$cds-alias-object-interaction-color-selected};
+      --clr-wizard-stepnav-text-disabled: #{tokens.$cds-alias-typography-disabled};
+      --clr-wizard-stepnav-item-border-color: #{tokens.$cds-alias-status-neutral-tint};
+      --clr-wizard-stepnav-item-complete-border-color: #{tokens.$cds-alias-status-success};
+      --clr-wizard-stepnav-selected-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-wizard-stepnav-selected-bgcolor: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-wizard-stepnav-selected-error-bgcolor: #{tokens.$cds-alias-status-danger-tint};
+      --clr-wizard-stepnav-selected-hover-bgcolor: var(--cds-alias-object-interaction-background-selected-hover);
+      --clr-wizard-stepnav-selected-active-bgcolor: var(--cds-alias-object-interaction-background-selected-active);
+      --clr-wizard-stepnav-link-error-icon-color: #{tokens.$cds-alias-status-danger};
+      --clr-wizard-stepnav-link-complete-icon-color: #{tokens.$cds-alias-status-success};
+      --clr-wizard-stepnav-border-color: #{tokens.$cds-alias-object-container-border-color};
+      --clr-wizard-stepnav-hover-bgcolor: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-wizard-stepnav-active-bgcolor: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-wizard-stepnav-item-error-border-color: #{tokens.$cds-alias-status-danger};
+      --clr-wizard-title-text: #{tokens.$cds-alias-typography-color-400};
+      --clr-wizard-header-action-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-wizard-header-action-color--hovered: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-wizard-box-shadow: #{tokens.$cds-alias-object-shadow-300};
+      --clr-wizard-content-background-color: #{tokens.$cds-alias-object-container-background};
+    }
+  }
+}

package/wizard/_variables.wizard.scss

@@ -0,0 +1,58 @@
+/*
+ * 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';
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+$clr-wizard-vertical-space: density.$clr-base-vertical-offset-2xl !default;
+$clr-wizard-horizontal-space: density.$clr-base-horizontal-offset-2xl !default;
+$clr-wizard-footer-vertical-space: var(--clr-wizard-footer-vertical-space) !default;
+
+$clr-wizard-main-bgcolor: var(--clr-wizard-main-bgcolor) !default;
+$clr-wizard-main-text-color: var(--clr-wizard-main-text-color) !default;
+
+$clr-wizard-stepnav-bgcolor: var(--clr-wizard-stepnav-bgcolor) !default;
+$clr-wizard-stepnav-text: var(--clr-wizard-stepnav-text) !default;
+$clr-wizard-stepnav-text-active: var(--clr-wizard-stepnav-text-active) !default;
+$clr-wizard-stepnav-text-hover: var(--clr-wizard-stepnav-text-hover) !default;
+$clr-wizard-stepnav-text-selected: var(--clr-wizard-stepnav-text-selected) !default;
+$clr-wizard-stepnav-text-disabled: var(--clr-wizard-stepnav-text-disabled) !default;
+$clr-wizard-stepnav-border-color: var(--clr-wizard-stepnav-border-color) !default;
+$clr-wizard-stepnav-border-size: var(--clr-wizard-stepnav-border-size) !default;
+$clr-wizard-stepnav-item-border-color: var(--clr-wizard-stepnav-item-border-color) !default;
+$clr-wizard-stepnav-item-complete-border-color: var(--clr-wizard-stepnav-item-complete-border-color) !default;
+$clr-wizard-stepnav-selected-border-color: var(--clr-wizard-stepnav-selected-border-color) !default;
+$clr-wizard-stepnav-selected-bgcolor: var(--clr-wizard-stepnav-selected-bgcolor) !default;
+$clr-wizard-stepnav-selected-error-bgcolor: var(--clr-wizard-stepnav-selected-error-bgcolor) !default;
+$clr-wizard-stepnav-selected-hover-bgcolor: var(--clr-wizard-stepnav-selected-hover-bgcolor) !default;
+$clr-wizard-stepnav-selected-active-bgcolor: var(--clr-wizard-stepnav-selected-active-bgcolor) !default;
+$clr-wizard-stepnav-link-error-icon-color: var(--clr-wizard-stepnav-link-error-icon-color) !default;
+$clr-wizard-stepnav-link-complete-icon-color: var(--clr-wizard-stepnav-link-complete-icon-color) !default;
+$clr-wizard-stepnav-item-error-border-color: var(--clr-wizard-stepnav-item-error-border-color) !default;
+$clr-wizard-stepnav-hover-bgcolor: var(--clr-wizard-stepnav-hover-bgcolor) !default;
+$clr-wizard-stepnav-active-bgcolor: var(--clr-wizard-stepnav-active-bgcolor) !default;
+
+$clr-wizard-title-text: var(--clr-wizard-title-text) !default;
+$clr-wizard-footer-height: var(--clr-wizard-footer-height) !default;
+$clr-wizard-header-action-color: var(--clr-wizard-header-action-color) !default;
+$clr-wizard-header-action-color--hovered: var(--clr-wizard-header-action-color--hovered) !default;
+$clr-wizard-box-shadow: var(--clr-wizard-box-shadow) !default;
+$clr-wizard-border-radius: var(--clr-wizard-border-radius) !default;
+
+$clr-wizard-all-dialog-min-width: #{mixins.baselinePx(240)};
+$clr-wizard-all-dialog-min-height: #{mixins.baselinePx(420)};
+$clr-wizard-md-nav-min-width: #{mixins.baselinePx(216)};
+$clr-wizard-md-nav-max-width: #{mixins.baselinePx(240)};
+$clr-wizard-md-dialog-max-height: #{mixins.baselinePx(504)};
+$clr-wizard-lg-nav-min-width: $clr-wizard-all-dialog-min-width;
+$clr-wizard-lg-nav-max-width: #{mixins.baselinePx(288)};
+$clr-wizard-lg-dialog-max-height: #{mixins.baselinePx(720)};
+$clr-wizard-xl-nav-min-width: $clr-wizard-all-dialog-min-width;
+$clr-wizard-xl-nav-max-width: #{mixins.baselinePx(320)};
+$clr-wizard-xl-dialog-max-height: 75vh;