@rossigee/clarity-ui 18.2.1-fixed

package/layout/_card.clarity.scss

@@ -0,0 +1,311 @@
+/*
+ * 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 'sass:meta';
+@use '../styles/mixins';
+@use '../styles/variables/variables';
+@use 'variables.card' as card-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.card');
+@include mixins.exports('card.clarity') {
+  %card-border-appearance {
+    box-shadow: card-variables.$clr-card-box-shadow;
+    border-radius: card-variables.$clr-card-border-radius;
+    border: card-variables.$clr-card-border-width solid card-variables.$clr-card-border-color;
+  }
+
+  %clickable-card-transition {
+    box-shadow: card-variables.$clr-card-clickable-box-shadow;
+    border: tokens.$cds-alias-object-border-width-100 solid card-variables.$clr-card-clickable-border-color;
+    cursor: pointer;
+    text-decoration: none;
+    transition:
+      border 0.2s ease,
+      box-shadow 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  %card-space-between {
+    margin-top: 0;
+    margin-bottom: density.$clr-base-gap-m;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  //Responsive Card Images
+  %card-image-appearance {
+    display: block;
+    height: auto;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .card {
+    position: relative;
+    display: block;
+    background-color: card-variables.$clr-card-bg-color;
+    width: 100%;
+    margin-top: density.$clr-base-vertical-offset-2xl;
+
+    @extend %card-border-appearance;
+
+    .alert {
+      margin: 0 0 #{density.$clr-base-gap-s} 0;
+    }
+
+    .btn-link {
+      min-width: 0;
+
+      //NOTE: Set left and right padding of link buttons to 0. aligning these buttons
+      //without removing the paddings is a huge task and leads to a brittle card css
+      //plus the alignment doesn't work in all the cases
+      padding: 0;
+    }
+
+    //Clickable Cards
+    &.clickable {
+      color: inherit;
+
+      &:hover {
+        @extend %clickable-card-transition;
+      }
+    }
+
+    .card-title,
+    .card-text,
+    .card-media-block,
+    .list,
+    .list-unstyled {
+      @extend %card-space-between;
+    }
+
+    & > .list,
+    & > .list-unstyled {
+      padding: density.$clr-base-vertical-offset-l density.$clr-base-horizontal-offset-xl;
+    }
+
+    .list-group {
+      padding-left: 0;
+      margin-bottom: 0;
+      list-style: none;
+    }
+
+    .list-group-item {
+      @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+      padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl;
+      background-color: card-variables.$clr-card-bg-color;
+      border-bottom: card-variables.$clr-card-border-width solid card-variables.$clr-card-border-color;
+    }
+  }
+
+  .card-block {
+    padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl;
+  }
+
+  .card-footer {
+    display: flex;
+    flex-direction: row;
+    gap: density.$clr-base-gap-s;
+    padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-xl;
+  }
+
+  h3.card-header,
+  .card-header {
+    @include mixins.generate-typography-token('SECTION-20-STD');
+
+    padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl;
+    color: card-variables.$clr-card-header-title-color;
+  }
+
+  h4.card-title,
+  .card-title {
+    @include mixins.generate-typography-token('SUBSECTION-16-EXP');
+
+    color: card-variables.$clr-card-content-title-color;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &.card-header,
+    &.card-title {
+      margin-top: 0; // removes default margin from clr-ui typography styles
+    }
+  }
+
+  .card-text {
+    @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+    color: card-variables.$clr-card-text-color;
+  }
+
+  //Images
+  .card-img {
+    &:first-child > img {
+      border-radius: 0;
+      border-top-left-radius: card-variables.$clr-card-border-radius;
+      border-top-right-radius: card-variables.$clr-card-border-radius;
+    }
+
+    &:last-child > img {
+      border-radius: 0;
+      border-bottom-left-radius: card-variables.$clr-card-border-radius;
+      border-bottom-right-radius: card-variables.$clr-card-border-radius;
+    }
+
+    & > img {
+      @extend %card-image-appearance;
+    }
+  }
+
+  //Card with just an image
+  .card.card-img,
+  .card > .card-img:first-child:last-child {
+    & > img {
+      border-radius: card-variables.$clr-card-border-radius;
+
+      @extend %card-image-appearance;
+    }
+  }
+
+  .card-block,
+  .card-footer {
+    .btn,
+    .btn.btn-link,
+    .card-link {
+      margin: 0;
+    }
+
+    .btn-group .btn {
+      margin: 0;
+    }
+  }
+
+  .card-header,
+  .card-block {
+    border-bottom: card-variables.$clr-card-border-width solid card-variables.$clr-card-border-color;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  //Use border-bottom directly on card header and card block to simplify the layout
+  //Card dividers should only be used inside of a .card-block
+  .card-divider {
+    display: block;
+    border-bottom: card-variables.$clr-card-border-width solid card-variables.$clr-card-divider-color;
+  }
+
+  .card-block {
+    .card-divider {
+      @extend %card-space-between;
+
+      margin-left: calc(-1 * density.$clr-base-horizontal-offset-xl);
+      margin-right: calc(-1 * density.$clr-base-horizontal-offset-xl);
+      width: auto;
+    }
+  }
+
+  //Hide card dividers and just show the border bottom of card-header and card-block
+  .card-header,
+  .card-block {
+    & + .card-divider {
+      display: none;
+    }
+  }
+
+  //Card Media Block
+  .card-media-block {
+    display: flex;
+
+    .card-media-image {
+      flex: 0 0 auto;
+
+      @include mixins.max-equilateral(density.$clr-base-icon-size-4xl);
+    }
+
+    .card-media-description {
+      @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+      display: flex;
+      flex-direction: column;
+      color: card-variables.$clr-card-text-color;
+      margin-left: density.$clr-base-horizontal-offset-xl;
+    }
+
+    .card-media-title {
+      display: inline-block;
+    }
+
+    span,
+    .card-media-text {
+      display: inline-block;
+    }
+
+    &.wrap {
+      flex-direction: column;
+
+      .card-media-description {
+        margin-left: 0;
+        margin-top: density.$clr-base-vertical-offset-xl;
+      }
+    }
+  }
+
+  .card-block {
+    & > .list,
+    & > .list-unstyled {
+      padding: 0;
+    }
+  }
+
+  //Credit: Bootstrap 4 Card Masonry
+  //Added some fixes to avoid flickering in Clickable cards
+  //Added extra column classes to control the number of CSS columns
+
+  @media screen and (min-width: map.get(variables.$clr-grid-breakpoints, sm)) {
+    .card-columns {
+      column-count: 3;
+      column-gap: density.$clr-base-gap-m;
+      break-inside: avoid;
+      column-fill: balance;
+
+      //Note: Safari Bug Fix for CSS Columns
+      //http://stackoverflow.com/a/34998087/3538394
+      perspective: 1;
+
+      &.card-columns-2 {
+        column-count: 2;
+      }
+
+      &.card-columns-4 {
+        column-count: 4;
+      }
+
+      .card {
+        display: inline-block; //For some weird reason stops the cards from getting cut off between 2 columns
+        margin: density.$clr-base-vertical-offset-s density.$clr-base-horizontal-offset-s;
+      }
+
+      .clickable {
+        //To fix the flickering issue with clickable card transition
+        //http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
+        backface-visibility: hidden;
+      }
+    }
+  }
+}

package/layout/_login.clarity.scss

@@ -0,0 +1,240 @@
+/*
+ * 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 'sass:meta';
+@use '../image/icons.clarity';
+@use '../styles/mixins';
+@use '../styles/variables/variables';
+@use 'variables.login' as login-variables;
+@use '../forms/styles/variables.forms' as forms-variables;
+@use '../emphasis/alert/variables.alert' as alert-variables;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.login');
+@include mixins.exports('login.clarity') {
+  .login-wrapper {
+    display: flex;
+    height: 100%;
+    background: icons.generateLoginBackground();
+    background-size: 100%;
+    background-position: mixins.baselinePx(580) 0;
+    background-repeat: no-repeat;
+
+    .login {
+      background: login-variables.$clr-login-background-color;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl;
+      height: auto;
+      min-height: 100vh;
+      width: mixins.baselinePx(580);
+
+      .login-footer,
+      .login-header {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        align-items: center;
+
+        .actions {
+          margin-left: auto;
+        }
+      }
+
+      .login-header {
+        .logo {
+          height: tokens.$cds-global-space-7;
+          width: 100%;
+          mask: icons.generateLoginVMWareLogo();
+          mask-repeat: no-repeat;
+          background-color: login-variables.$clr-login-logo-color;
+        }
+      }
+
+      .login-footer {
+        gap: login-variables.$clr-login-footer-gap;
+
+        a,
+        .copyright {
+          @include mixins.generate-typography-token('CAPTION-LG-11-STD');
+
+          color: login-variables.$clr-login-copyright-color;
+        }
+      }
+
+      .login-body {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: mixins.baselinePx(320);
+      }
+
+      .title {
+        @include mixins.generate-typography-token('DISPLAY-40');
+
+        color: login-variables.$clr-login-title-color;
+
+        .welcome {
+          color: login-variables.$clr-login-welcome-color;
+          margin: 0 0 #{density.$clr-base-vertical-offset-m} 0;
+        }
+
+        .hint {
+          @include mixins.generate-typography-token('SECTION-20-STD');
+
+          color: login-variables.$clr-login-hint-color;
+          margin: #{density.$clr-base-vertical-offset-m} 0 0 0;
+        }
+      }
+
+      .login-group {
+        display: flex;
+        flex-direction: column;
+        padding-top: density.$clr-base-vertical-offset-3xl;
+        width: 100%;
+
+        // @TODO Are these used? Some are documented on the website but not actually used. Some are neither documented nor used.
+        .auth-source,
+        .username,
+        .password,
+        .checkbox,
+        .clr-form-control {
+          margin: 0 0 #{density.$clr-base-vertical-offset-2xl} 0;
+        }
+
+        .clr-checkbox-wrapper {
+          margin: 0 0 density.$clr-base-vertical-offset-3xl 0;
+        }
+
+        // Overrides for new forms layouts to match original login layout
+        .clr-control-container {
+          display: block;
+          width: 100%;
+
+          // Override to make select full width
+          .clr-select-wrapper,
+          .clr-select {
+            width: 100%;
+          }
+
+          // Override to make input full width
+          .clr-input-wrapper > .clr-input {
+            width: 100%;
+          }
+
+          // Override to make password full width
+          .clr-input-wrapper {
+            width: 100%;
+
+            & > .clr-input-group {
+              max-width: 100%;
+              width: 100%;
+
+              & > .clr-input {
+                width: calc(100% - #{forms-variables.$clr-forms-icon-size});
+              }
+            }
+          }
+        }
+
+        // @TODO Is this used? It's not documented on the website or used in the demo app.
+        .tooltip-validation {
+          margin-top: density.$clr-base-vertical-offset-s;
+        }
+
+        // @TODO Is this used? It's not documented on the website or used in the demo app.
+        .tooltip-validation .username,
+        .tooltip-validation .password {
+          width: 100%;
+          margin-top: 0; //Since the top margin is now handled by the tooltip itself
+        }
+
+        .error {
+          @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+
+          display: none;
+          padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-m;
+          background: login-variables.$clr-login-error-background-color;
+          color: alert-variables.$clr-alert-danger-font-color;
+          border-radius: alert-variables.$clr-alert-borderradius;
+          border: alert-variables.$clr-alert-borderwidth solid alert-variables.$clr-alert-danger-border-color;
+
+          &::before {
+            content: '';
+            mask: icons.generateErrorIcon("'none'");
+            mask-repeat: no-repeat;
+            mask-size: cover;
+            background-color: login-variables.$clr-login-error-icon-color;
+            margin: tokens.$cds-global-space-1 density.$clr-base-horizontal-offset-s 0 0;
+
+            @include mixins.equilateral(login-variables.$clr-login-icon-size);
+          }
+
+          &.active {
+            display: flex;
+
+            &::before {
+              flex: 0 0 login-variables.$clr-login-icon-size;
+            }
+          }
+        }
+
+        .btn {
+          margin: density.$clr-base-vertical-offset-m 0;
+          max-width: none;
+        }
+
+        .signup {
+          text-align: center;
+        }
+      }
+
+      &::after {
+        position: absolute;
+        content: '';
+        display: block;
+        width: tokens.$cds-global-space-1;
+        height: 100%;
+        background: tokens.$cds-global-color-black;
+        opacity: 0.1;
+        top: 0;
+        right: calc(-1 * tokens.$cds-global-space-2);
+      }
+    }
+  }
+
+  @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, md)) {
+    .login-wrapper {
+      justify-content: center;
+      background: login-variables.$clr-login-background-color;
+
+      .login {
+        width: 100%;
+        margin-left: 0;
+        padding: density.$clr-base-vertical-offset-2xl 20%;
+
+        &::after {
+          content: none;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, sm)) {
+    .login-wrapper {
+      .login {
+        padding: density.$clr-base-vertical-offset-2xl 15%;
+      }
+    }
+  }
+}

package/layout/_properties.card.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/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('card.properties') {
+  @include mixins.root-or-host() {
+    --clr-card-title-font-weight: #{tokens.$cds-alias-typography-section-font-weight};
+    --clr-card-border-width: #{tokens.$cds-alias-object-border-width-100};
+
+    &,
+    & [clr-density] {
+      --clr-card-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-card-bg-color: #{tokens.$cds-alias-object-container-background};
+      --clr-card-divider-color: #{tokens.$cds-alias-object-border-color};
+      --clr-card-title-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-card-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-card-box-shadow: #{tokens.$cds-alias-object-shadow-300};
+      --clr-card-clickable-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-card-clickable-box-shadow: 0 0 0 #{tokens.$cds-global-space-1} var(--clr-card-clickable-border-color);
+      --clr-card-header-title-color: var(--clr-card-title-color);
+      --clr-card-content-title-color: var(--clr-card-title-color);
+      --clr-card-text-color: #{tokens.$cds-alias-typography-color-400};
+    }
+  }
+}

package/layout/_properties.login.scss

@@ -0,0 +1,32 @@
+/*
+ * 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 '../emphasis/alert/variables.alert' as alert-variables;
+@use '../styles/variables/variables.density' as density;
+
+@include mixins.exports('login.properties') {
+  @include mixins.root-or-host() {
+    [cds-theme] {
+      --clr-login-title-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-login-hint-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-login-footer-gap: #{density.$clr-base-gap-l};
+      --clr-login-copyright-color: #{tokens.$cds-alias-typography-link-color};
+      --clr-login-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-login-welcome-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-login-error-background-color: #{alert-variables.$clr-alert-danger-bg-color};
+      --clr-login-error-icon-color: #{alert-variables.$clr-alert-danger-icon-color};
+      --clr-login-logo-color: #717175; // Brand color from spec. Not a Clarity color.
+    }
+
+    [cds-theme~='dark'] {
+      --clr-login-logo-color: #{tokens.$cds-global-color-white};
+    }
+  }
+}

package/layout/_variables.card.scss

@@ -0,0 +1,23 @@
+/*
+ * 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';
+
+// Usage: ../layout/_card.clarity.scss
+$clr-card-bg-color: var(--clr-card-bg-color);
+$clr-card-divider-color: var(--clr-card-divider-color);
+$clr-card-title-color: var(--clr-card-title-color);
+$clr-card-title-font-weight: var(--clr-card-title-font-weight);
+$clr-card-header-title-color: var(--clr-card-header-title-color);
+$clr-card-content-title-color: var(--clr-card-content-title-color);
+$clr-card-border-color: var(--clr-card-border-color);
+$clr-card-box-shadow: var(--clr-card-box-shadow);
+$clr-card-clickable-border-color: var(--clr-card-clickable-border-color);
+$clr-card-clickable-box-shadow: var(--clr-card-clickable-box-shadow);
+$clr-card-border-radius: var(--clr-card-border-radius);
+$clr-card-border-width: var(--clr-card-border-width);
+$clr-card-text-color: var(--clr-card-text-color);