@rossigee/clarity-ui 18.2.1-fixed

package/collapsible-panel/_mixins.collapsible-panel.scss

@@ -0,0 +1,189 @@
+/*
+ * 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 'variables.collapsible-panel' as panel-variables;
+@use '../styles/variables/variables.density' as density;
+
+@mixin collapsible-panel(
+  $prefix,
+  $text-color: panel-variables.$clr-collapsible-panel-text-color,
+  $text-color-hover: panel-variables.$clr-collapsible-panel-text-color-hover,
+  $text-color-active: panel-variables.$clr-collapsible-panel-text-color-active,
+  $panel-disabled-color: panel-variables.$clr-collapsible-panel-panel-disabled-color,
+  $content-background-color: panel-variables.$clr-collapsible-panel-content-background-color,
+  $header-background-color: panel-variables.$clr-collapsible-panel-header-background-color,
+  $header-disabled-background-color: panel-variables.$clr-collapsible-panel-header-disabled-background-color,
+  $header-hover-background-color: panel-variables.$clr-collapsible-panel-header-hover-background-color,
+  $header-active-background-color: panel-variables.$clr-collapsible-panel-header-active-background-color,
+  $header-open-background-color: panel-variables.$clr-collapsible-panel-header-open-background-color,
+  $header-open-active-background-color: panel-variables.$clr-collapsible-panel-header-open-active-background-color,
+  $header-open-hover-background-color: panel-variables.$clr-collapsible-panel-header-open-hover-background-color,
+  $border-color: panel-variables.$clr-collapsible-panel-border-color,
+  $content-color: panel-variables.$clr-collapsible-panel-content-color,
+  $responsive-breakpoint: panel-variables.$clr-collapsible-panel-responsive-breakpoint
+) {
+  .#{$prefix}-panel {
+    display: block;
+  }
+
+  .#{$prefix}-header {
+    width: 100%;
+    border: tokens.$cds-alias-object-border-width-100 solid $border-color;
+    border-bottom-width: 0;
+    background: $header-background-color;
+    color: $text-color;
+    text-align: left;
+    transition: background-color tokens.$cds-global-animation-duration-quick tokens.$cds-global-animation-easing-in-out;
+
+    @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+
+    &:hover {
+      color: $text-color-hover;
+      background-color: $header-hover-background-color;
+    }
+
+    &:active {
+      color: $text-color-active;
+      background-color: $header-active-background-color;
+    }
+
+    .#{$prefix}-panel-disabled > div > & {
+      background-color: $header-background-color;
+
+      &:hover,
+      &:active {
+        background-color: $header-background-color;
+      }
+    }
+
+    .#{$prefix}-panel-disabled > .#{$prefix}-panel-open > & {
+      background-color: $header-disabled-background-color;
+
+      &:hover,
+      &:active {
+        background-color: $header-disabled-background-color;
+      }
+    }
+  }
+
+  .#{$prefix}-panel:last-child {
+    .#{$prefix}-header,
+    .#{$prefix}-content {
+      border-bottom: tokens.$cds-global-space-1 solid $border-color;
+    }
+  }
+
+  .#{$prefix}-header-button {
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 1 0;
+    width: 100%;
+    border: 0;
+    padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-l;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    gap: density.$clr-base-gap-s;
+
+    @media (min-width: $responsive-breakpoint) {
+      flex-flow: row;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      .#{$prefix}-status,
+      .#{$prefix}-title,
+      .#{$prefix}-description {
+        color: $panel-disabled-color;
+      }
+    }
+  }
+
+  .#{$prefix}-status {
+    display: inline-flex;
+    width: density.$clr-base-layout-space-xl;
+    vertical-align: top;
+  }
+
+  .#{$prefix}-title {
+    display: inline-block;
+  }
+
+  .#{$prefix}-header-has-description {
+    .#{$prefix}-title {
+      min-width: panel-variables.$clr-collapsible-panel-title-min-width;
+      max-width: mixins.baselinePx(264);
+      width: 100%;
+    }
+  }
+
+  .#{$prefix}-description {
+    display: inline-block;
+    max-width: mixins.baselinePx(650);
+
+    @media (min-width: $responsive-breakpoint) {
+      margin-left: density.$clr-base-horizontal-offset-l;
+    }
+  }
+
+  .#{$prefix}-content {
+    display: none;
+    overflow: hidden;
+    border: tokens.$cds-global-space-1 solid $border-color;
+    border-bottom: 0;
+    background: $content-background-color;
+
+    .clr-form {
+      padding: 0;
+    }
+  }
+
+  .#{$prefix}-inner-content {
+    padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl;
+  }
+
+  .#{$prefix}-angle {
+    transition: all tokens.$cds-global-animation-duration-quick tokens.$cds-global-animation-easing-in-out;
+    transform: rotate(90deg);
+  }
+
+  .#{$prefix}-panel-open {
+    & > .#{$prefix}-content-region .#{$prefix}-content {
+      display: block;
+    }
+
+    & > .#{$prefix}-header {
+      border-bottom: 0 !important;
+      background: $header-open-background-color;
+
+      &:hover {
+        background-color: $header-open-hover-background-color;
+      }
+
+      &:active {
+        color: $text-color-active;
+        background-color: $header-open-active-background-color;
+      }
+
+      .#{$prefix}-angle {
+        visibility: visible;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .#{$prefix}-panel:not(:last-child) > div[class*='#{$prefix}-panel-'] > .#{$prefix}-header {
+    &,
+    & + .#{$prefix}-content-region > .#{$prefix}-content {
+      border-bottom: none;
+    }
+  }
+}

package/collapsible-panel/_properties.collapsible-panel.scss

@@ -0,0 +1,42 @@
+/*
+ * 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('collapsible-panel.properties') {
+  @include mixins.root-or-host() {
+    &,
+    [clr-density] {
+      --clr-collapsible-panel-border-radius: #{density.$clr-base-border-radius-s};
+      --clr-collapsible-panel-title-min-width: #{density.$clr-base-layout-space-4xl};
+    }
+
+    &,
+    [cds-theme] {
+      --clr-collapsible-panel-text-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-collapsible-panel-text-color-hover: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-collapsible-panel-text-color-active: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-collapsible-panel-panel-disabled-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-collapsible-panel-content-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-collapsible-panel-content-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-collapsible-panel-header-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-collapsible-panel-header-disabled-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-collapsible-panel-header-hover-background-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-collapsible-panel-header-active-background-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-collapsible-panel-header-open-background-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-collapsible-panel-header-open-active-background-color: var(
+        --cds-alias-object-interaction-background-selected-active
+      );
+      --clr-collapsible-panel-header-open-hover-background-color: var(
+        --cds-alias-object-interaction-background-selected-hover
+      );
+      --clr-collapsible-panel-border-color: #{tokens.$cds-alias-object-border-color};
+    }
+  }
+}

package/collapsible-panel/_variables.collapsible-panel.scss

@@ -0,0 +1,40 @@
+/*
+ * 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 '../styles/variables/variables';
+
+$clr-collapsible-panel-text-color: var(--clr-collapsible-panel-text-color) !default;
+$clr-collapsible-panel-text-color-hover: var(--clr-collapsible-panel-text-color-hover) !default;
+$clr-collapsible-panel-text-color-active: var(--clr-collapsible-panel-text-color-active) !default;
+$clr-collapsible-panel-panel-disabled-color: var(--clr-collapsible-panel-panel-disabled-color) !default;
+$clr-collapsible-panel-content-background-color: var(--clr-collapsible-panel-content-background-color) !default;
+$clr-collapsible-panel-header-background-color: var(--clr-collapsible-panel-header-background-color) !default;
+$clr-collapsible-panel-header-disabled-background-color: var(
+  --clr-collapsible-panel-header-disabled-background-color
+) !default;
+$clr-collapsible-panel-header-hover-background-color: var(
+  --clr-collapsible-panel-header-hover-background-color
+) !default;
+$clr-collapsible-panel-header-active-background-color: var(
+  --clr-collapsible-panel-header-active-background-color
+) !default;
+$clr-collapsible-panel-header-open-background-color: var(--clr-collapsible-panel-header-open-background-color) !default;
+$clr-collapsible-panel-header-open-active-background-color: var(
+  --clr-collapsible-panel-header-open-active-background-color
+) !default;
+$clr-collapsible-panel-header-open-hover-background-color: var(
+  --clr-collapsible-panel-header-open-hover-background-color
+) !default;
+
+$clr-collapsible-panel-content-color: var(--clr-collapsible-panel-content-color) !default;
+
+$clr-collapsible-panel-responsive-breakpoint: map.get(variables.$clr-grid-breakpoints, sm) !default;
+
+$clr-collapsible-panel-border-color: var(--clr-collapsible-panel-border-color) !default;
+$clr-collapsible-panel-border-radius: var(--clr-collapsible-panel-border-radius) !default;
+$clr-collapsible-panel-title-min-width: var(--clr-collapsible-panel-title-min-width) !default;

package/data/_mixins.tables.scss

@@ -0,0 +1,111 @@
+/*
+ * 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.tables' as table-variables;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+// Mixin for basic table styles to be able to reuse them on non-table elements.
+
+@mixin basic-table($table, $thead, $tbody, $tr, $th, $td) {
+  #{$table} {
+    border-collapse: separate;
+    border: table-variables.$clr-table-borderwidth solid table-variables.$clr-table-border-color;
+    border-radius: table-variables.$clr-table-border-radius;
+    background-color: table-variables.$clr-table-bgcolor;
+    color: table-variables.$clr-table-font-color;
+    margin: table-variables.$clr-table-margin;
+    max-width: 100%;
+    width: 100%;
+
+    #{$th},
+    #{$td} {
+      border-top: table-variables.$clr-table-borderwidth solid table-variables.$clr-tablerow-bordercolor;
+      padding: table-variables.$clr-table-cell-padding;
+      text-align: center;
+      vertical-align: top;
+
+      &.left {
+        text-align: left;
+      }
+
+      &.right {
+        text-align: right;
+      }
+    }
+
+    #{$td} {
+      min-height: table-variables.$clr-table-cell-height;
+
+      @include mixins.generate-typography-token('BODY-14-RG-CPT');
+    }
+
+    #{$th} {
+      @include mixins.generate-typography-token('ColumnHeader-11-SB-CPT');
+
+      color: table-variables.$clr-thead-color;
+      background-color: table-variables.$clr-thead-bgcolor;
+      vertical-align: middle;
+      border-bottom: table-variables.$clr-table-borderwidth solid table-variables.$clr-table-border-color;
+      border-top: 0 none;
+    }
+
+    #{$tbody} #{$tr}:first-child #{$td} {
+      border-top: 0 none;
+    }
+
+    // in the rare event we have more than one tbody element.
+    #{$tbody} + #{$tbody} {
+      border-top: table-variables.$clr-table-borderwidth solid table-variables.$clr-table-border-color;
+    }
+
+    // Rounded corners on tables are a pain...
+    #{$thead} #{$th} {
+      &:first-child {
+        border-radius: 0;
+        border-top-left-radius: table-variables.$clr-table-cornercellradius;
+      }
+
+      &:last-child {
+        border-radius: 0;
+        border-top-right-radius: table-variables.$clr-table-cornercellradius;
+      }
+    }
+
+    #{$tbody}:last-child {
+      #{$tr}:last-child {
+        #{$td} {
+          &:first-child {
+            border-radius: 0;
+            border-bottom-left-radius: table-variables.$clr-table-cornercellradius;
+          }
+
+          &:last-child {
+            border-radius: 0;
+            border-bottom-right-radius: table-variables.$clr-table-cornercellradius;
+          }
+        }
+      }
+    }
+  }
+
+  // @deprecated CSS rule #{$table}-compact in favor of compact mode in density theme
+  #{$table}-compact {
+    --clr-table-margin: #{mixins.baselinePx(20)} 0 0 0;
+    --clr-table-cell-vertical-padding: #{table-variables.$clr-table-compact-vertical-padding};
+    #{$th},
+    #{$td} {
+      min-height: table-variables.$clr-table-compact-cell-height;
+      padding: table-variables.$clr-table-cell-compact-padding;
+    }
+    #{$td} {
+      font-size: mixins.baselinePx(13);
+      line-height: tokens.$cds-global-space-7;
+    }
+  }
+}

package/data/_properties.tables.scss

@@ -0,0 +1,62 @@
+/*
+ * 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('table.properties') {
+  @include mixins.root-or-host() {
+    --clr-table-borderwidth: #{tokens.$cds-alias-object-border-width-100};
+    --clr-table-noborder-borderwidth: #{tokens.$cds-global-space-0};
+
+    // @deprecated ALL compact properties in favor of compact mode in density theme
+    --clr-table-compact-cell-height: #{tokens.$cds-global-space-9};
+    --clr-table-compact-row-height: calc(var(--clr-table-compact-cell-height) + var(--clr-table-borderwidth));
+    --clr-table-compact-vertical-padding: #{tokens.$cds-global-space-3};
+    --clr-table-compact-horizontal-padding: #{tokens.$cds-global-space-6};
+    --clr-table-cell-compact-padding: var(--clr-table-compact-vertical-padding)
+      var(--clr-table-compact-horizontal-padding);
+
+    &,
+    [clr-density] {
+      --clr-table-border-radius: #{density.$clr-base-border-radius-s};
+      --clr-table-cornercellradius: #{density.$clr-base-border-radius-s};
+      --clr-table-cell-horizontal-padding: #{density.$clr-base-horizontal-offset-xl};
+      --clr-table-cell-vertical-padding: #{density.$clr-base-vertical-offset-multi-row-inline-m};
+      --clr-table-cell-padding: var(--clr-table-cell-vertical-padding) var(--clr-table-cell-horizontal-padding);
+      --clr-table-margin: #{density.$clr-base-vertical-offset-2xl} 0 0 0;
+      --clr-table-fontsize: #{tokens.$cds-alias-typography-secondary-font-size};
+      --clr-table-cell-height: #{density.$clr-base-dg-row-height};
+      --clr-table-row-height: calc(var(--clr-table-cell-height) + var(--clr-table-borderwidth));
+    }
+
+    &,
+    [cds-theme] {
+      // Theme variables
+      // Usage: ./data/_tables.clarity.scss
+      // Usage: ./data/datagrid/_datagrid.clarity.scss
+      --clr-table-bgcolor: #{tokens.$cds-alias-object-container-background};
+      --clr-thead-bgcolor: #{tokens.$cds-alias-object-container-background-tint};
+
+      // Usage: ./data/datagrid/_datagrid.clarity.scss
+      --clr-table-header-border-bottom-color: #{tokens.$cds-alias-object-border-color};
+      --clr-table-footer-border-top-color: #{tokens.$cds-alias-object-border-color};
+      --clr-table-border-color: #{tokens.$cds-alias-object-border-color};
+
+      // Usage: ./data/_tables.clarity.scss
+      --clr-tablerow-bordercolor: #{tokens.$cds-alias-object-border-color};
+
+      // Usage: ./data/_tables.clarity.scss
+      // Usage: ./data/datagrid/_datagrid.clarity.scss
+      --clr-table-font-color: #{tokens.$cds-alias-typography-color-400};
+
+      // Table header styles
+      --clr-thead-color: #{tokens.$cds-alias-typography-color-400};
+    }
+  }
+}

package/data/_tables.clarity.scss

@@ -0,0 +1,120 @@
+/*
+ * 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 '../styles/variables/variables.global';
+@use 'variables.tables' as table-variables;
+@use 'mixins.tables' as table-mixins;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.tables');
+@include mixins.exports('tables.clarity') {
+  @include table-mixins.basic-table('.table', 'thead', 'tbody', 'tr', 'th', 'td');
+
+  .table.table-vertical {
+    thead th {
+      border: 0 none;
+      border-radius: 0;
+      display: none;
+    }
+
+    th {
+      border-bottom: 0;
+      border-top: table-variables.$clr-table-borderwidth solid table-variables.$clr-table-border-color;
+      vertical-align: top;
+    }
+
+    td,
+    th {
+      text-align: left;
+      border-color: table-variables.$clr-table-border-color;
+
+      &:first-child {
+        @include mixins.generate-typography-token('ColumnHeader-11-SB-CPT');
+
+        border-right: table-variables.$clr-table-borderwidth solid table-variables.$clr-table-border-color;
+        background-color: table-variables.$clr-thead-bgcolor;
+      }
+    }
+
+    tbody:first-of-type {
+      tr:first-child {
+        th,
+        td {
+          border-top: 0 none;
+
+          &:first-child {
+            border-radius: 0;
+            border-top-left-radius: table-variables.$clr-table-cornercellradius;
+          }
+
+          &:last-child {
+            border-radius: 0;
+            border-top-right-radius: table-variables.$clr-table-cornercellradius;
+          }
+        }
+      }
+    }
+
+    tbody:last-child {
+      tr:last-child {
+        th,
+        td {
+          &:first-child {
+            border-radius: 0;
+            border-bottom-left-radius: table-variables.$clr-table-cornercellradius;
+          }
+
+          &:last-child {
+            border-radius: 0;
+            border-bottom-right-radius: table-variables.$clr-table-cornercellradius;
+          }
+        }
+      }
+    }
+  }
+
+  .table.table-noborder {
+    border-radius: 0;
+    box-shadow: none;
+    background-color: transparent;
+    border-width: 0;
+
+    th {
+      border-bottom-color: transparent;
+      border-top: 0 none;
+
+      &:first-child {
+        // need this for vertical tables...
+        border-right: 0 none;
+      }
+    }
+
+    td {
+      border-top: 0 none;
+
+      &:first-child {
+        border-right: 0 none;
+      }
+    }
+
+    thead th {
+      &:first-child,
+      &:last-child {
+        border-radius: 0;
+      }
+    }
+
+    th,
+    td {
+      //  Very specific use of !important to avoid specificity inflation.
+      border-radius: 0 !important;
+    }
+  }
+}

package/data/_variables.tables.scss

@@ -0,0 +1,42 @@
+/*
+ * 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';
+
+$clr-table-borderwidth: var(--clr-table-borderwidth) !default;
+$clr-table-border-radius: var(--clr-table-border-radius) !default;
+$clr-table-cornercellradius: var(--clr-table-cornercellradius) !default;
+$clr-table-cell-padding: var(--clr-table-cell-padding) !default;
+$clr-table-cell-horizontal-padding: var(--clr-table-cell-horizontal-padding) !default;
+$clr-table-cell-vertical-padding: var(--clr-table-cell-vertical-padding) !default;
+$clr-table-noborder-borderwidth: var(--clr-table-noborder-borderwidth) !default;
+
+$clr-table-bgcolor: var(--clr-table-bgcolor) !default;
+$clr-thead-bgcolor: var(--clr-thead-bgcolor) !default;
+
+$clr-table-header-border-bottom-color: var(--clr-table-header-border-bottom-color) !default;
+$clr-table-footer-border-top-color: var(--clr-table-footer-border-top-color) !default;
+$clr-table-border-color: var(--clr-table-border-color) !default;
+
+$clr-tablerow-bordercolor: var(--clr-tablerow-bordercolor) !default;
+
+$clr-table-font-color: var(--clr-table-font-color) !default;
+$clr-table-margin: var(--clr-table-margin) !default;
+
+$clr-thead-color: var(--clr-thead-color) !default;
+
+$clr-table-fontsize: var(--clr-table-fontsize) !default;
+
+$clr-table-cell-height: var(--clr-table-cell-height) !default;
+$clr-table-row-height: var(--clr-table-row-height) !default;
+
+// @deprecated ALL compact properties in favor of compact mode in density theme
+$clr-table-cell-compact-padding: var(--clr-table-cell-compact-padding) !default;
+$clr-table-compact-cell-height: var(--clr-table-compact-cell-height) !default;
+$clr-table-compact-row-height: var(--clr-table-compact-row-height) !default;
+$clr-table-compact-vertical-padding: var(--clr-table-compact-vertical-padding) !default;
+$clr-table-compact-horizontal-padding: var(--clr-table-compact-horizontal-padding);