@rossigee/clarity-ui 18.2.1-fixed

package/styles/variables/_variables.layout.scss

@@ -0,0 +1,37 @@
+/*
+ * 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.global';
+
+/* stylelint-disable */
+$clr-grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+/* stylelint-enable */
+
+$clr-grid-columns: 12 !default;
+$clr-grid-gutter-width: var(--clr-grid-gutter-width) !default;
+$clr-grid-container-padding: var(--clr-grid-container-padding) !default;
+$clr-grid-column-padding: var(--clr-grid-column-padding) !default;
+$clr-grid-row-margin: var(--clr-grid-row-margin) !default;
+
+$clr-sizes: () !default;
+$clr-sizes: map.merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto,
+  ),
+  $clr-sizes
+);

package/styles/variables/_variables.scss

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+@forward 'variables.global';
+@forward 'variables.layout';
+@forward 'variables.typography';
+@forward 'variables.density';

package/styles/variables/_variables.typography.scss

@@ -0,0 +1,156 @@
+/*
+ * 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.density' as density;
+
+// Usage: ../typography/_typography.clarity.scss
+$clr-fontSkipBase64: false !default;
+
+// Temporal internal use only. Should be removed once CDS token based family is available.
+$clr-metropolis-font-family: var(--clr-metropolis-font-family);
+$clr-font: var(--clr-font) !default;
+$clr-body-font: $clr-font;
+
+$clr-font-weight-light: var(--clr-font-weight-light) !default;
+$clr-font-weight-regular: var(--clr-font-weight-regular) !default;
+$clr-font-weight-semibold: var(--clr-font-weight-semibold) !default;
+$clr-font-weight-bold: var(--clr-font-weight-bold) !default;
+$clr-font-weight-extrabold: var(--clr-font-weight-extrabold) !default;
+
+$clr-global-typography-margin-top: #{density.$clr-base-vertical-offset-2xl} !default;
+$clr-global-typography-margin-bottom: 0 !default;
+
+// Header styles
+//H1 - login_productName
+//'DISPLAY-40'
+$clr-h1-color: var(--clr-h1-color) !default;
+$clr-h1-font-weight: var(--clr-h1-font-weight) !default;
+$clr-h1-font-family: var(--clr-h1-font-family) !default;
+$clr-h1-font-size: var(--clr-h1-font-size) !default;
+$clr-h1-letter-spacing: var(--clr-h1-letter-spacing) !default;
+$clr-h1-line-height: var(--clr-h1-line-height) !default;
+
+//H2 - login_trademark, page_mainHeading
+//'HEADLINE-32'
+$clr-h2-color: var(--clr-h2-color) !default;
+$clr-h2-font-weight: var(--clr-h2-font-weight) !default;
+$clr-h2-font-family: var(--clr-h2-font-family) !default;
+$clr-h2-font-size: var(--clr-h2-font-size) !default;
+$clr-h2-letter-spacing: var(--clr-h2-letter-spacing) !default;
+$clr-h2-line-height: var(--clr-h2-line-height) !default;
+
+//H3 - login_subtitle, modal_header, page_secondaryHeading
+//'TITLE-24-EXP'
+$clr-h3-color: var(--clr-h3-color) !default;
+$clr-h3-font-weight: var(--clr-h3-font-weight) !default;
+$clr-h3-font-family: var(--clr-h3-font-family) !default;
+$clr-h3-font-size: var(--clr-h3-font-size) !default;
+$clr-h3-letter-spacing: var(--clr-h3-letter-spacing) !default;
+$clr-h3-line-height: var(--clr-h3-line-height) !default;
+
+//H4 - card titles, page_tertiaryHeading
+//'SECTION-20-STD'
+$clr-h4-color: var(--clr-h4-color) !default;
+$clr-h4-font-weight: var(--clr-h4-font-weight) !default;
+$clr-h4-font-family: var(--clr-h4-font-family) !default;
+$clr-h4-font-size: var(--clr-h4-font-size) !default;
+$clr-h4-letter-spacing: var(--clr-h4-letter-spacing) !default;
+$clr-h4-line-height: var(--clr-h4-line-height) !default;
+
+//H5 - dgrid placeholder, datagrid_column_toggle_title, form_block_label, nav_title, page_introParagraph, page_sectionHeader
+//'SUBSECTION-16-EXP'
+$clr-h5-color: var(--clr-h5-color) !default;
+$clr-h5-font-weight: var(--clr-h5-font-weight) !default;
+$clr-h5-font-family: var(--clr-h5-font-family) !default;
+$clr-h5-font-size: var(--clr-h5-font-size) !default;
+$clr-h5-letter-spacing: var(--clr-h5-letter-spacing) !default;
+$clr-h5-line-height: var(--clr-h5-line-height) !default;
+
+//H6 - toc_header
+// 'MESSAGE-16-EXP'
+$clr-h6-color: var(--clr-h6-color) !default;
+$clr-h6-font-weight: var(--clr-h6-font-weight) !default;
+$clr-h6-font-family: var(--clr-h6-font-family) !default;
+$clr-h6-font-size: var(--clr-h6-font-size) !default;
+$clr-h6-letter-spacing: var(--clr-h6-letter-spacing) !default;
+$clr-h6-line-height: var(--clr-h6-line-height) !default;
+
+// Non-header text styles
+//P0 - Intro text
+//'BODY-14-RG-STD'
+$clr-p0-color: var(--clr-p0-color) !default;
+$clr-p0-font-weight: var(--clr-p0-font-weight) !default;
+$clr-p0-font-size: var(--clr-p0-font-size) !default;
+$clr-p0-letter-spacing: var(--clr-p0-letter-spacing) !default;
+$clr-p0-line-height: var(--clr-p0-line-height) !default;
+
+//P1 - card text, dropdown_text, page_bodyText, tab_text, toc_text
+//'BODY-14-RG-STD'
+$clr-p1-color: var(--clr-p1-color) !default;
+$clr-p1-font-weight: var(--clr-p1-font-weight) !default;
+$clr-p1-font-size: var(--clr-p1-font-size) !default;
+$clr-p1-letter-spacing: var(--clr-p1-letter-spacing) !default;
+$clr-p1-line-height: var(--clr-p1-line-height) !default;
+
+//P2 - form_label, stackview_header
+//'SECONDARY-13-MD-EXP'
+$clr-p2-color: var(--clr-p2-color) !default;
+$clr-p2-font-weight: var(--clr-p2-font-weight) !default;
+$clr-p2-font-size: var(--clr-p2-font-size) !default;
+$clr-p2-letter-spacing: var(--clr-p2-letter-spacing) !default;
+$clr-p2-line-height: var(--clr-p2-line-height) !default;
+
+//P3 - alerts, form_group_fields, stackview_text, table_text, tooltip_text
+//'SECONDARY-13-RG-EXP'
+$clr-p3-color: var(--clr-p3-color) !default;
+$clr-p3-font-weight: var(--clr-p3-font-weight) !default;
+$clr-p3-font-size: var(--clr-p3-font-size) !default;
+$clr-p3-letter-spacing: var(--clr-p3-letter-spacing) !default;
+$clr-p3-line-height: var(--clr-p3-line-height) !default;
+
+//P4 - small alerts, dropdown_header, vertical_nav_header
+//'SECONDARY-13-SB-STD'
+$clr-p4-color: var(--clr-p4-color) !default;
+$clr-p4-font-weight: var(--clr-p4-font-weight) !default;
+$clr-p4-font-size: var(--clr-p4-font-size) !default;
+$clr-p4-letter-spacing: var(--clr-p4-letter-spacing) !default;
+$clr-p4-line-height: var(--clr-p4-line-height) !default;
+
+//P5
+//'SECONDARY-13-RG-EXP'
+$clr-p5-color: var(--clr-p5-color) !default;
+$clr-p5-font-weight: var(--clr-p5-font-weight) !default;
+$clr-p5-font-size: var(--clr-p5-font-size) !default;
+$clr-p5-letter-spacing: var(--clr-p5-letter-spacing) !default;
+$clr-p5-line-height: var(--clr-p5-line-height) !default;
+
+//P6 - card link btns, form_subtext, table_header
+//'CAPTION-LG-11-STD'
+$clr-p6-color: var(--clr-p6-color) !default;
+$clr-p6-font-weight: var(--clr-p6-font-weight) !default;
+$clr-p6-font-size: var(--clr-p6-font-size) !default;
+$clr-p6-letter-spacing: var(--clr-p6-letter-spacing) !default;
+$clr-p6-line-height: var(--clr-p6-line-height) !default;
+
+//P7 - label_text
+//'CAPTION-SM-10'
+$clr-p7-color: var(--clr-p7-color) !default;
+$clr-p7-font-weight: var(--clr-p7-font-weight) !default;
+$clr-p7-font-size: var(--clr-p7-font-size) !default;
+$clr-p7-letter-spacing: var(--clr-p7-letter-spacing) !default;
+$clr-p7-line-height: var(--clr-p7-line-height) !default;
+
+//P8
+//'CAPTION-SM-10'
+$clr-p8-color: var(--clr-p8-color) !default;
+$clr-p8-font-weight: var(--clr-p8-font-weight) !default;
+$clr-p8-font-size: var(--clr-p8-font-size) !default;
+$clr-p8-letter-spacing: var(--clr-p8-letter-spacing) !default;
+$clr-p8-line-height: var(--clr-p8-line-height) !default;
+
+// Lists
+$clr-list-item-color: var(--clr-list-item-color) !default;

package/timeline/_properties.timeline.scss

@@ -0,0 +1,38 @@
+/*
+ * 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('timeline.properties') {
+  @include mixins.root-or-host() {
+    // body (title)
+    --clr-timeline-step-title-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+
+    &,
+    & [clr-density] {
+      --clr-timeline-icon-size: #{density.$clr-base-icon-size-3xl};
+
+      // internal property cannot be exposed
+      --clr-timeline-step-internal-spacing: #{density.$clr-base-vertical-offset-l};
+    }
+
+    &,
+    & [cds-theme] {
+      // colors
+      --clr-timeline-line-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-timeline-step-header-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-timeline-step-title-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-timeline-step-description-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-timeline-incomplete-step-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-timeline-current-step-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-timeline-success-step-color: #{tokens.$cds-alias-status-success};
+      --clr-timeline-error-step-color: #{tokens.$cds-alias-status-danger};
+    }
+  }
+}

package/timeline/_timeline.clarity.scss

@@ -0,0 +1,172 @@
+/*
+ * 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.timeline' as timeline-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.timeline');
+@include mixins.exports('timeline.clarity') {
+  .clr-timeline {
+    display: flex;
+    padding: timeline-variables.$clr-timeline-step-internal-spacing;
+  }
+
+  .clr-timeline-step {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: mixins.baselinePx(175);
+    gap: timeline-variables.$clr-timeline-step-internal-spacing;
+
+    > cds-icon:not([size]),
+    > clr-icon:not([size]) {
+      @include mixins.min-equilateral(timeline-variables.$clr-timeline-icon-size);
+    }
+
+    > cds-icon[shape='circle'],
+    > clr-icon[shape='circle'] {
+      color: timeline-variables.$clr-timeline-incomplete-step-color;
+    }
+
+    > cds-icon[shape='dot-circle'],
+    > clr-icon[shape='dot-circle'] {
+      color: timeline-variables.$clr-timeline-current-step-color;
+    }
+
+    > cds-icon[shape='success-standard'],
+    > clr-icon[shape='success-standard'] {
+      color: timeline-variables.$clr-timeline-success-step-color;
+    }
+
+    > cds-icon[shape='error-standard'],
+    > clr-icon[shape='error-standard'] {
+      color: timeline-variables.$clr-timeline-error-step-color;
+    }
+
+    > clr-spinner.spinner {
+      margin: tokens.$cds-global-space-2; // Simulates the padding in CDS-ICONs
+      &,
+      &::after,
+      &::before {
+        @include mixins.min-equilateral(timeline-variables.$clr-timeline-spinner-size);
+      }
+    }
+
+    // style for the connecting line between icons
+    &:not(:last-of-type) .clr-timeline-step-body::before {
+      content: '';
+      background: timeline-variables.$clr-timeline-line-color;
+      height: timeline-variables.$clr-timeline-line-thickness;
+      width: calc(100% - timeline-variables.$clr-timeline-icon-size);
+      transform: translate(
+        timeline-variables.$clr-timeline-icon-size,
+        calc(
+          -0.5 *
+            (
+              (timeline-variables.$clr-timeline-step-internal-spacing * 2) +
+                timeline-variables.$clr-timeline-line-thickness + timeline-variables.$clr-timeline-icon-size
+            )
+        )
+      );
+    }
+  }
+
+  // Note: headers (timestamps) are unable to auto-adjust height based on their siblings' using pure CSS.
+  // Hence forcing them in one-line by using "nowrap".
+  .clr-timeline-step-header {
+    white-space: nowrap;
+    color: timeline-variables.$clr-timeline-step-header-color;
+
+    @include mixins.generate-typography-token('SECONDARY-13-MD-CPT');
+  }
+
+  .clr-timeline-step-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .clr-timeline-step-title {
+    color: timeline-variables.$clr-timeline-step-title-color;
+    margin-bottom: density.$clr-base-gap-xs;
+
+    @include mixins.generate-typography-token(
+      'SECONDARY-13-SB-CPT',
+      (
+        font-weight: timeline-variables.$clr-timeline-step-title-font-weight,
+      )
+    );
+  }
+
+  .clr-timeline-step-description {
+    color: timeline-variables.$clr-timeline-step-description-color;
+
+    @include mixins.generate-typography-token('CAPTION-LG-11-STD');
+
+    button {
+      display: block;
+      margin-top: density.$clr-base-gap-s;
+    }
+
+    img {
+      width: 100%;
+      margin-top: density.$clr-base-vertical-offset-m;
+    }
+  }
+
+  .clr-timeline.clr-timeline-vertical {
+    flex-direction: column;
+    min-width: mixins.baselinePx(320);
+
+    .clr-timeline-step {
+      flex-direction: row;
+      margin-left: 0;
+      position: relative; // required for vertical line to get 100% height of step body it belongs to
+
+      &:not(:last-of-type) {
+        margin-bottom: timeline-variables.$clr-timeline-step-internal-spacing;
+      }
+
+      // style for the connecting line between icons
+      &:not(:last-of-type) .clr-timeline-step-body::before {
+        position: absolute;
+        width: timeline-variables.$clr-timeline-line-thickness;
+        height: calc(
+          100% - (timeline-variables.$clr-timeline-icon-size - timeline-variables.$clr-timeline-step-internal-spacing)
+        );
+        transform: translate(
+          calc(
+            -0.5 * (timeline-variables.$clr-timeline-icon-size + timeline-variables.$clr-timeline-line-thickness) -
+              timeline-variables.$clr-timeline-step-internal-spacing
+          ),
+          calc(
+            (-1 * timeline-variables.$clr-timeline-step-internal-spacing) + timeline-variables.$clr-timeline-icon-size
+          )
+        );
+      }
+    }
+
+    .clr-timeline-step-header {
+      text-align: right;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      word-break: normal;
+      width: mixins.baselinePx(60);
+      min-width: mixins.baselinePx(60);
+      margin: timeline-variables.$clr-timeline-step-internal-spacing 0 0 0;
+    }
+
+    .clr-timeline-step-body {
+      display: flex;
+      flex-direction: column;
+      min-width: mixins.baselinePx(178);
+      padding-top: timeline-variables.$clr-timeline-step-internal-spacing;
+    }
+  }
+}

package/timeline/_variables.timeline.scss

@@ -0,0 +1,29 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+$clr-timeline-line-color: var(--clr-timeline-line-color) !default;
+$clr-timeline-step-header-color: var(--clr-timeline-step-header-color) !default;
+$clr-timeline-step-title-color: var(--clr-timeline-step-title-color) !default;
+$clr-timeline-step-description-color: var(--clr-timeline-step-description-color) !default;
+
+$clr-timeline-incomplete-step-color: var(--clr-timeline-incomplete-step-color) !default;
+$clr-timeline-current-step-color: var(--clr-timeline-current-step-color) !default;
+$clr-timeline-success-step-color: var(--clr-timeline-success-step-color) !default;
+$clr-timeline-error-step-color: var(--clr-timeline-error-step-color) !default;
+
+// overall
+$clr-timeline-icon-size: var(--clr-timeline-icon-size);
+$clr-timeline-spinner-size: calc(#{$clr-timeline-icon-size} - #{tokens.$cds-global-space-3});
+$clr-timeline-default-icon-size: #{density.$clr-base-icon-size-s};
+$clr-timeline-line-thickness: #{tokens.$cds-alias-object-border-width-200};
+$clr-timeline-step-internal-spacing: var(--clr-timeline-step-internal-spacing);
+
+// body (title)
+$clr-timeline-step-title-font-weight: var(--clr-timeline-step-title-font-weight);

package/typography/_code.scss

@@ -0,0 +1,36 @@
+/*
+ * 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('code.clarity') {
+  //Styles for Clarity Code Snippets
+  pre {
+    margin: density.$clr-base-vertical-offset-l 0;
+  }
+
+  pre {
+    border: tokens.$cds-alias-object-border-width-100 solid tokens.$cds-alias-object-container-border-color;
+    border-radius: density.$clr-base-border-radius-s;
+  }
+
+  pre code {
+    white-space: pre;
+  }
+
+  //Overriding bootstrap code styles
+  // @deprecated Bootstrap dependencies are deprecated since 1.0. Review and edit before 2.0 if needed.
+  code {
+    &.clr-code {
+      color: tokens.$cds-alias-utility-red;
+      padding: 0;
+      background: transparent;
+    }
+  }
+}