@rossigee/clarity-ui 18.2.1-fixed

package/styles/variables/_properties.density.scss

@@ -0,0 +1,223 @@
+/*
+ * 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 '../core/tokens/variables.tokens' as tokens;
+@use '../mixins';
+
+@include mixins.exports('density.properties') {
+  @include mixins.root-or-host() {
+    // Typography
+    --clr-base-typography-font-size-caption-small: #{mixins.baselinePx(10)};
+    --clr-base-typography-font-size-caption: #{mixins.baselinePx(11)};
+    --clr-base-typography-font-size-button: #{tokens.$cds-global-space-6};
+    --clr-base-typography-font-size-inline: #{mixins.baselinePx(13)};
+    --clr-base-typography-font-size-default: #{mixins.baselinePx(14)};
+    --clr-base-typography-font-size-sub-section: #{tokens.$cds-global-space-7};
+    --clr-base-typography-font-size-section: #{mixins.baselinePx(20)};
+    --clr-base-typography-font-size-heading: #{tokens.$cds-global-space-9};
+    --clr-base-typography-font-size-headline: #{tokens.$cds-global-space-10};
+    --clr-base-typography-font-size-display: #{mixins.baselinePx(40)};
+    --clr-base-typography-line-height-12: #{tokens.$cds-global-space-6};
+    --clr-base-typography-line-height-16: #{tokens.$cds-global-space-7};
+    --clr-base-typography-line-height-20: #{mixins.baselinePx(20)};
+    --clr-base-typography-line-height-24: #{tokens.$cds-global-space-9};
+    --clr-base-typography-line-height-32: #{tokens.$cds-global-space-10};
+    --clr-base-typography-line-height-36: #{tokens.$cds-global-space-11};
+    --clr-base-typography-line-height-44: #{mixins.baselinePx(44)};
+
+    // Borders
+    --clr-base-border-stroke: #{tokens.$cds-global-space-2};
+    --clr-base-border-radius-xs: #{tokens.$cds-global-space-2};
+    --clr-base-border-radius-s: #{tokens.$cds-global-space-3};
+    --clr-base-border-radius-m: #{tokens.$cds-global-space-5};
+    --clr-base-border-radius-l: #{tokens.$cds-global-space-6};
+    --clr-base-border-radius-xl: #{tokens.$cds-global-space-7};
+
+    // Offsets & Spacing
+    --clr-base-offset-0: #{tokens.$cds-global-space-0};
+    --clr-base-vertical-offset-2xs: #{tokens.$cds-global-space-2};
+    --clr-base-vertical-offset-xs: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-s: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-m: #{tokens.$cds-global-space-4};
+    --clr-base-vertical-offset-l: #{tokens.$cds-global-space-6};
+    --clr-base-vertical-offset-xl: #{tokens.$cds-global-space-7};
+    --clr-base-vertical-offset-2xl: #{tokens.$cds-global-space-9};
+    --clr-base-vertical-offset-3xl: #{tokens.$cds-global-space-12};
+    --clr-base-vertical-offset-multi-row-s: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-multi-row-m: #{tokens.$cds-global-space-5};
+    --clr-base-vertical-offset-multi-row-inline-s: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-multi-row-inline-m: #{tokens.$cds-global-space-5};
+    --clr-base-vertical-offset-multi-row-outline-s: #{tokens.$cds-global-space-4};
+    --clr-base-vertical-offset-multi-row-outline-m: #{mixins.baselinePx(10)};
+    --clr-base-horizontal-offset-2xs: #{tokens.$cds-global-space-2};
+    --clr-base-horizontal-offset-xs: #{tokens.$cds-global-space-3};
+    --clr-base-horizontal-offset-s: #{tokens.$cds-global-space-3};
+    --clr-base-horizontal-offset-m: #{tokens.$cds-global-space-5};
+    --clr-base-horizontal-offset-l: #{tokens.$cds-global-space-6};
+    --clr-base-horizontal-offset-xl: #{tokens.$cds-global-space-7};
+    --clr-base-horizontal-offset-2xl: #{tokens.$cds-global-space-9};
+    --clr-base-horizontal-offset-3xl: #{tokens.$cds-global-space-12};
+
+    // Row Heights
+    --clr-base-row-height-xs: #{tokens.$cds-global-space-7};
+    --clr-base-row-height-s: #{tokens.$cds-global-space-9};
+    --clr-base-row-height-m: #{tokens.$cds-global-space-10};
+    --clr-base-row-height-l: #{tokens.$cds-global-space-11};
+    --clr-base-row-height-20: #{mixins.baselinePx(20)};
+    --clr-base-dg-row-height: #{tokens.$cds-global-space-10};
+    --clr-base-dg-compact-row-height: #{tokens.$cds-global-space-9};
+
+    // Gaps
+    --clr-base-gap-xs: #{tokens.$cds-global-space-3};
+    --clr-base-gap-s: #{tokens.$cds-global-space-5};
+    --clr-base-gap-m: #{tokens.$cds-global-space-6};
+    --clr-base-gap-l: #{tokens.$cds-global-space-7};
+    --clr-base-gap-xl: #{tokens.$cds-global-space-9};
+    --clr-base-gap-2xl: #{tokens.$cds-global-space-10};
+
+    // Icons
+    --clr-base-icon-size-xs: #{tokens.$cds-global-space-6};
+    --clr-base-icon-size-s: #{tokens.$cds-global-space-7};
+    --clr-base-icon-size-m: #{mixins.baselinePx(20)};
+    --clr-base-icon-size-l: #{tokens.$cds-global-space-9};
+    --clr-base-icon-size-xl: #{mixins.baselinePx(28)};
+    --clr-base-icon-size-2xl: #{tokens.$cds-global-space-10};
+    --clr-base-icon-size-3xl: #{tokens.$cds-global-space-10};
+    --clr-base-icon-size-4xl: #{tokens.$cds-global-space-13};
+    --clr-base-icon-tooltip: var(--clr-base-icon-size-s);
+
+    // Layout Spaces
+    --clr-base-layout-space-0: #{tokens.$cds-global-space-0};
+    --clr-base-layout-space-4xs: #{tokens.$cds-global-space-1};
+    --clr-base-layout-space-3xs: #{tokens.$cds-global-space-2};
+    --clr-base-layout-space-2xs: #{tokens.$cds-global-space-3};
+    --clr-base-layout-space-xs: #{tokens.$cds-global-space-5};
+    --clr-base-layout-space-s: #{tokens.$cds-global-space-6};
+    --clr-base-layout-space-m: #{tokens.$cds-global-space-7};
+    --clr-base-layout-space-l: #{tokens.$cds-global-space-9};
+    --clr-base-layout-space-xl: #{tokens.$cds-global-space-10};
+    --clr-base-layout-space-2xl: #{mixins.baselinePx(40)};
+    --clr-base-layout-space-3xl: #{tokens.$cds-global-space-12};
+    --clr-base-layout-space-4xl: #{tokens.$cds-global-space-13};
+    --clr-base-layout-space-5xl: #{tokens.$cds-global-space-15};
+
+    // Spinners
+    --clr-base-spinner-s: var(--clr-base-icon-size-s);
+    --clr-base-spinner-m: #{tokens.$cds-global-space-10};
+    --clr-base-spinner-l: var(--clr-base-layout-space-4xl);
+    // density spinner strokes are only available in code since they are impossible to be applied in figma
+    --clr-base-spinner-stroke-s: #{tokens.$cds-alias-object-border-width-200};
+    --clr-base-spinner-stroke-m: #{tokens.$cds-alias-object-border-width-400};
+    --clr-base-spinner-stroke-l: #{tokens.$cds-global-space-4};
+
+    // Components
+    --clr-base-header-height: #{mixins.baselinePx(56)};
+    --clr-base-tree-node-height: #{tokens.$cds-global-space-10};
+    --clr-base-progress-bar-height: #{tokens.$cds-global-space-6};
+    --clr-base-control-group-gap: #{tokens.$cds-global-space-0};
+  }
+
+  [clr-density='compact'] {
+    --clr-base-typography-font-size-caption-small: #{mixins.baselinePx(10)};
+    --clr-base-typography-font-size-caption: #{mixins.baselinePx(11)};
+    --clr-base-typography-font-size-button: #{tokens.$cds-global-space-6};
+    --clr-base-typography-font-size-inline: #{tokens.$cds-global-space-6};
+    --clr-base-typography-font-size-default: #{mixins.baselinePx(13)};
+    --clr-base-typography-font-size-sub-section: #{mixins.baselinePx(14)};
+    --clr-base-typography-font-size-section: #{tokens.$cds-global-space-7};
+    --clr-base-typography-font-size-heading: #{tokens.$cds-global-space-9};
+    --clr-base-typography-font-size-headline: #{mixins.baselinePx(28)};
+    --clr-base-typography-font-size-display: #{tokens.$cds-global-space-11};
+    --clr-base-typography-line-height-12: #{tokens.$cds-global-space-6};
+    --clr-base-typography-line-height-16: #{tokens.$cds-global-space-7};
+    --clr-base-typography-line-height-20: #{tokens.$cds-global-space-8};
+    --clr-base-typography-line-height-24: #{mixins.baselinePx(20)};
+    --clr-base-typography-line-height-32: #{mixins.baselinePx(28)};
+    --clr-base-typography-line-height-36: #{tokens.$cds-global-space-10};
+    --clr-base-typography-line-height-44: #{tokens.$cds-global-space-10};
+    --clr-base-border-stroke: #{tokens.$cds-global-space-1};
+    --clr-base-border-radius-xs: #{tokens.$cds-global-space-2};
+    --clr-base-border-radius-s: #{tokens.$cds-global-space-2};
+    --clr-base-border-radius-m: #{tokens.$cds-global-space-3};
+    --clr-base-border-radius-l: #{tokens.$cds-global-space-5};
+    --clr-base-border-radius-xl: #{mixins.baselinePx(10)};
+    --clr-base-offset-0: #{tokens.$cds-global-space-0};
+    --clr-base-vertical-offset-2xs: #{tokens.$cds-global-space-1};
+    --clr-base-vertical-offset-xs: #{tokens.$cds-global-space-2};
+    --clr-base-vertical-offset-s: #{tokens.$cds-global-space-2};
+    --clr-base-vertical-offset-m: #{mixins.baselinePx(3)};
+    --clr-base-vertical-offset-l: #{tokens.$cds-global-space-5};
+    --clr-base-vertical-offset-xl: #{tokens.$cds-global-space-6};
+    --clr-base-vertical-offset-2xl: #{mixins.baselinePx(20)};
+    --clr-base-vertical-offset-3xl: #{tokens.$cds-global-space-11};
+    --clr-base-vertical-offset-multi-row-s: #{tokens.$cds-global-space-2};
+    --clr-base-vertical-offset-multi-row-m: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-multi-row-inline-s: #{tokens.$cds-global-space-2};
+    --clr-base-vertical-offset-multi-row-inline-m: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-multi-row-outline-s: #{tokens.$cds-global-space-3};
+    --clr-base-vertical-offset-multi-row-outline-m: #{tokens.$cds-global-space-4};
+    --clr-base-horizontal-offset-2xs: #{tokens.$cds-global-space-1};
+    --clr-base-horizontal-offset-xs: #{tokens.$cds-global-space-2};
+    --clr-base-horizontal-offset-s: #{tokens.$cds-global-space-2};
+    --clr-base-horizontal-offset-m: #{tokens.$cds-global-space-4};
+    --clr-base-horizontal-offset-l: #{tokens.$cds-global-space-5};
+    --clr-base-horizontal-offset-xl: #{tokens.$cds-global-space-6};
+    --clr-base-horizontal-offset-2xl: #{mixins.baselinePx(20)};
+    --clr-base-horizontal-offset-3xl: #{tokens.$cds-global-space-11};
+    --clr-base-row-height-xs: #{tokens.$cds-global-space-7};
+    --clr-base-row-height-s: #{mixins.baselinePx(20)};
+    --clr-base-row-height-m: #{tokens.$cds-global-space-9};
+    --clr-base-row-height-l: #{mixins.baselinePx(28)};
+    --clr-base-row-height-20: #{tokens.$cds-global-space-7};
+    --clr-base-dg-row-height: #{tokens.$cds-global-space-9};
+    --clr-base-dg-compact-row-height: #{mixins.baselinePx(20)};
+    --clr-base-gap-xs: #{tokens.$cds-global-space-2};
+    --clr-base-gap-s: #{tokens.$cds-global-space-4};
+    --clr-base-gap-m: #{mixins.baselinePx(10)};
+    --clr-base-gap-l: #{tokens.$cds-global-space-6};
+    --clr-base-gap-xl: #{mixins.baselinePx(20)};
+    --clr-base-gap-2xl: #{tokens.$cds-global-space-9};
+    --clr-base-icon-size-xs: #{tokens.$cds-global-space-6};
+    --clr-base-icon-size-s: #{tokens.$cds-global-space-7};
+    --clr-base-icon-size-m: #{tokens.$cds-global-space-8};
+    --clr-base-icon-size-l: #{mixins.baselinePx(20)};
+    --clr-base-icon-size-xl: #{tokens.$cds-global-space-9};
+    --clr-base-icon-size-2xl: #{mixins.baselinePx(28)};
+    --clr-base-icon-size-3xl: #{mixins.baselinePx(28)};
+    --clr-base-icon-size-4xl: #{mixins.baselinePx(60)};
+    --clr-base-layout-space-0: #{tokens.$cds-global-space-0};
+    --clr-base-layout-space-4xs: #{tokens.$cds-global-space-1};
+    --clr-base-layout-space-3xs: #{tokens.$cds-global-space-2};
+    --clr-base-layout-space-2xs: #{tokens.$cds-global-space-3};
+    --clr-base-layout-space-xs: #{tokens.$cds-global-space-4};
+    --clr-base-layout-space-s: #{tokens.$cds-global-space-6};
+    --clr-base-layout-space-m: #{tokens.$cds-global-space-7};
+    --clr-base-layout-space-l: #{mixins.baselinePx(20)};
+    --clr-base-layout-space-xl: #{tokens.$cds-global-space-9};
+    --clr-base-layout-space-2xl: #{tokens.$cds-global-space-10};
+    --clr-base-layout-space-3xl: #{mixins.baselinePx(40)};
+    --clr-base-layout-space-4xl: #{mixins.baselinePx(56)};
+    --clr-base-layout-space-5xl: #{mixins.baselinePx(80)};
+    --clr-base-icon-tooltip: var(--clr-base-icon-size-s);
+    --clr-base-spinner-s: var(--clr-base-icon-size-s);
+    --clr-base-spinner-m: #{mixins.baselinePx(28)};
+    --clr-base-spinner-l: var(--clr-base-layout-space-4xl); // default
+
+    // density spinner strokes are only available in code since they are impossible to be applied in figma
+    --clr-base-spinner-stroke-s: #{tokens.$cds-alias-object-border-width-200};
+    --clr-base-spinner-stroke-m: #{tokens.$cds-alias-object-border-width-300};
+    --clr-base-spinner-stroke-l: #{tokens.$cds-alias-object-border-width-400}; // default
+    --clr-base-header-height: #{tokens.$cds-global-space-12};
+    --clr-base-tree-node-height: #{tokens.$cds-global-space-9};
+    --clr-base-progress-bar-height: #{mixins.baselinePx(10)};
+    --clr-base-control-group-gap: #{tokens.$cds-global-space-2};
+
+    .datagrid .datagrid-cell:not(.datagrid-detail-caret, .datagrid-expandable-caret, .datagrid-row-actions) {
+      @include mixins.cell-children-aligment();
+    }
+  }
+}

package/styles/variables/_properties.global.scss

@@ -0,0 +1,51 @@
+/*
+ * 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 '../mixins';
+@use 'variables.global';
+@use '../core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('global.properties') {
+  @include mixins.root-or-host() {
+    --clr-basefont-size: #{variables.$clr-basefont-size};
+
+    // app borders
+    --clr-global-borderradius: #{tokens.$cds-alias-object-border-radius-100};
+    --clr-global-borderwidth: #{tokens.$cds-alias-object-border-width-100};
+
+    &,
+    & [cds-theme] {
+      // component close icon colors
+      --clr-close-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-close-color-hover: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-close-color-active: #{tokens.$cds-alias-object-interaction-color-active};
+
+      // app background
+      --clr-global-app-background: #{tokens.$cds-alias-object-app-background};
+
+      // app selection colors
+      --clr-global-selection-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-global-on-selection-color: #{tokens.$cds-alias-object-interaction-color-selected};
+
+      // app hover colors
+      --clr-global-hover-color: #{tokens.$cds-alias-typography-link-color-hover};
+
+      // app font colors
+      --clr-global-content-header-font-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-global-font-color: #{tokens.$cds-alias-typography-color-500};
+
+      // app success/error colors
+      --clr-global-success-color: #{tokens.$cds-alias-status-success};
+      --clr-global-error-color: #{tokens.$cds-alias-status-danger};
+    }
+  }
+
+  @include mixins.root-or-host() {
+    // global box-shadows
+    --clr-popover-box-shadow-color: #{variables.$clr-popover-box-shadow-color};
+  }
+}

package/styles/variables/_properties.layout.scss

@@ -0,0 +1,21 @@
+/*
+ * 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 '../mixins';
+@use 'variables.density' as density;
+
+@include mixins.exports('layout.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [clr-density] {
+      --clr-grid-gutter-width: #{density.$clr-base-horizontal-offset-2xl};
+      --clr-grid-container-padding: calc(var(--clr-grid-gutter-width) * 0.5);
+      --clr-grid-column-padding: calc(var(--clr-grid-gutter-width) * 0.5);
+      --clr-grid-row-margin: calc(var(--clr-grid-gutter-width) * -0.5);
+    }
+  }
+}

package/styles/variables/_properties.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 'properties.layout';
+@forward 'properties.global';
+@forward 'properties.typography';
+@forward 'properties.density';

package/styles/variables/_properties.typography.scss

@@ -0,0 +1,164 @@
+/*
+ * 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 '../mixins';
+@use 'variables.density' as density;
+@use '../core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('typography.properties') {
+  @include mixins.root-or-host() {
+    // Temporal internal use only. Should be removed once CDS token based family is available.
+    --clr-metropolis-font-family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
+    --clr-body-font: var(--clr-metropolis-font-family); // #{tokens.$cds-alias-typography-font-family};
+    --clr-font: var(--clr-body-font);
+    --clr-display-font: var(--clr-metropolis-font-family); //#{tokens.$cds-alias-typography-header-font-family};
+    --clr-font-weight-light: #{tokens.$cds-alias-typography-font-weight-light};
+    --clr-font-weight-regular: #{tokens.$cds-alias-typography-font-weight-regular};
+    --clr-font-weight-semibold: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-font-weight-bold: #{tokens.$cds-alias-typography-font-weight-bold};
+    --clr-font-weight-extrabold: #{tokens.$cds-alias-typography-font-weight-extrabold};
+
+    // Header styles
+    //H1 - login_productName
+    //'DISPLAY-40'
+    --clr-h1-font-weight: #{tokens.$cds-alias-typography-display-font-weight};
+    --clr-h1-font-family: var(--clr-display-font);
+    --clr-h1-letter-spacing: #{mixins.baselinePx(-0.5)};
+
+    //H2 - login_trademark, page_mainHeading
+    //'HEADLINE-32'
+    --clr-h2-font-family: var(--clr-display-font);
+    --clr-h2-font-weight: #{tokens.$cds-alias-typography-headline-font-weight};
+    --clr-h2-letter-spacing: #{mixins.baselinePx(-0.4)};
+
+    //H3 - login_subtitle, modal_header, page_secondaryHeading
+    //'TITLE-24-EXP'
+    --clr-h3-font-family: var(--clr-display-font);
+    --clr-h3-font-weight: #{tokens.$cds-alias-typography-title-font-weight};
+    --clr-h3-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    //H4 - card titles, page_tertiaryHeading
+    //'SECTION-20-STD'
+    --clr-h4-font-family: var(--clr-display-font);
+    --clr-h4-font-weight: #{tokens.$cds-alias-typography-section-font-weight};
+    --clr-h4-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    //H5 - dgrid placeholder, datagrid_column_toggle_title, form_block_label, nav_title, page_introParagraph, page_sectionHeader
+    //'SUBSECTION-16-EXP'
+    --clr-h5-font-family: var(--clr-display-font);
+    --clr-h5-font-weight: #{tokens.$cds-alias-typography-subsection-font-weight};
+    --clr-h5-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    //H6 - Heading
+    //'MESSAGE-16-EXP'
+    --clr-h6-font-family: var(--clr-display-font);
+    --clr-h6-font-weight: #{tokens.$cds-alias-typography-message-font-weight};
+    --clr-h6-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    // Non-header text styles
+    //P0 - Intro text
+    //'BODY-14-RG-STD'
+    --clr-p0-font-weight: #{tokens.$cds-alias-typography-body-font-weight};
+    --clr-p0-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P1 - card text, dropdown_text, page_bodyText, tab_text, toc_text
+    //'BODY-14-RG-STD'
+    --clr-p1-font-weight: #{tokens.$cds-alias-typography-body-font-weight};
+    --clr-p1-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P2 - form_label, stackview_header
+    //'SECONDARY-13-MD-EXP'
+    --clr-p2-font-weight: #{tokens.$cds-alias-typography-font-weight-medium};
+    --clr-p2-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P3 - alerts, form_group_fields, stackview_text, table_text, tooltip_text
+    //'SECONDARY-13-RG-EXP'
+    --clr-p3-font-weight: #{tokens.$cds-alias-typography-secondary-font-weight};
+    --clr-p3-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P4 - small alerts, dropdown_header, vertical_nav_header
+    //'SECONDARY-13-SB-STD'
+    --clr-p4-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-p4-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P5
+    //'SECONDARY-13-RG-EXP'
+    --clr-p5-font-weight: #{tokens.$cds-alias-typography-secondary-font-weight};
+    --clr-p5-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P6 - card link btns, form_subtext, table_header
+    //'CAPTION-LG-11-STD'
+    --clr-p6-font-weight: #{tokens.$cds-alias-typography-caption-font-weight};
+    --clr-p6-letter-spacing: #{mixins.baselinePx(0.2)};
+
+    //P7 - label_text
+    //'CAPTION-SM-10'
+    --clr-p7-font-weight: #{tokens.$cds-alias-typography-smallcaption-font-weight};
+    --clr-p7-letter-spacing: #{mixins.baselinePx(0.5)};
+
+    //P8
+    //'CAPTION-SM-10'
+    --clr-p8-font-weight: #{tokens.$cds-alias-typography-smallcaption-font-weight};
+    --clr-p8-letter-spacing: #{mixins.baselinePx(0.5)};
+
+    &,
+    & [clr-density] {
+      --clr-h1-font-size: #{density.$clr-base-typography-font-size-display};
+      --clr-h1-line-height: #{density.$clr-base-typography-line-height-44};
+      --clr-h2-font-size: #{density.$clr-base-typography-font-size-headline};
+      --clr-h2-line-height: #{density.$clr-base-typography-line-height-36};
+      --clr-h3-font-size: #{density.$clr-base-typography-font-size-heading};
+      --clr-h3-line-height: #{density.$clr-base-typography-line-height-32};
+      --clr-h4-font-size: #{density.$clr-base-typography-font-size-section};
+      --clr-h4-line-height: #{density.$clr-base-typography-line-height-24};
+      --clr-h5-font-size: #{density.$clr-base-typography-font-size-sub-section};
+      --clr-h5-line-height: #{density.$clr-base-typography-line-height-24};
+      --clr-h6-font-size: #{density.$clr-base-typography-font-size-sub-section};
+      --clr-h6-line-height: #{density.$clr-base-typography-line-height-24};
+      --clr-p0-font-size: #{density.$clr-base-typography-font-size-default};
+      --clr-p0-line-height: #{density.$clr-base-typography-line-height-20};
+      --clr-p1-font-size: #{density.$clr-base-typography-font-size-default};
+      --clr-p1-line-height: #{density.$clr-base-typography-line-height-20};
+      --clr-p2-font-size: #{density.$clr-base-typography-font-size-inline};
+      --clr-p2-line-height: #{density.$clr-base-typography-line-height-24};
+      --clr-p3-font-size: #{density.$clr-base-typography-font-size-inline};
+      --clr-p3-line-height: #{density.$clr-base-typography-line-height-24};
+      --clr-p4-font-size: #{density.$clr-base-typography-font-size-inline};
+      --clr-p4-line-height: #{density.$clr-base-typography-line-height-20};
+      --clr-p5-font-size: #{density.$clr-base-typography-font-size-inline};
+      --clr-p5-line-height: #{density.$clr-base-typography-line-height-24};
+      --clr-p6-font-size: #{density.$clr-base-typography-font-size-caption};
+      --clr-p6-line-height: #{density.$clr-base-typography-line-height-16};
+      --clr-p7-font-size: #{density.$clr-base-typography-font-size-caption-small};
+      --clr-p7-line-height: #{density.$clr-base-typography-line-height-12};
+      --clr-p8-font-size: #{density.$clr-base-typography-font-size-caption-small};
+      --clr-p8-line-height: #{density.$clr-base-typography-line-height-12};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-h1-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-h2-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-h3-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-h4-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-h5-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-h6-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-p0-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p1-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p2-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p3-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p4-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p5-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p6-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p7-color: #{tokens.$cds-alias-typography-color-450};
+      --clr-p8-color: #{tokens.$cds-alias-typography-color-450};
+
+      // List item li
+      --clr-list-item-color: #{tokens.$cds-alias-typography-color-400};
+    }
+  }
+}

package/styles/variables/_variables.density.scss

@@ -0,0 +1,114 @@
+/*
+ * 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.
+ */
+$clr-base-typography-font-size-caption-small: var(--clr-base-typography-font-size-caption-small);
+$clr-base-typography-font-size-caption: var(--clr-base-typography-font-size-caption);
+$clr-base-typography-font-size-button: var(--clr-base-typography-font-size-button);
+$clr-base-typography-font-size-inline: var(--clr-base-typography-font-size-inline);
+$clr-base-typography-font-size-default: var(--clr-base-typography-font-size-default);
+$clr-base-typography-font-size-sub-section: var(--clr-base-typography-font-size-sub-section);
+$clr-base-typography-font-size-section: var(--clr-base-typography-font-size-section);
+$clr-base-typography-font-size-heading: var(--clr-base-typography-font-size-heading);
+$clr-base-typography-font-size-headline: var(--clr-base-typography-font-size-headline);
+$clr-base-typography-font-size-display: var(--clr-base-typography-font-size-display);
+
+$clr-base-typography-line-height-12: var(--clr-base-typography-line-height-12);
+$clr-base-typography-line-height-16: var(--clr-base-typography-line-height-16);
+$clr-base-typography-line-height-20: var(--clr-base-typography-line-height-20);
+$clr-base-typography-line-height-24: var(--clr-base-typography-line-height-24);
+$clr-base-typography-line-height-32: var(--clr-base-typography-line-height-32);
+$clr-base-typography-line-height-36: var(--clr-base-typography-line-height-36);
+$clr-base-typography-line-height-44: var(--clr-base-typography-line-height-44);
+
+$clr-base-border-stroke: var(--clr-base-border-stroke);
+
+$clr-base-border-radius-xs: var(--clr-base-border-radius-xs);
+$clr-base-border-radius-s: var(--clr-base-border-radius-s);
+$clr-base-border-radius-m: var(--clr-base-border-radius-m);
+$clr-base-border-radius-l: var(--clr-base-border-radius-l);
+$clr-base-border-radius-xl: var(--clr-base-border-radius-xl);
+
+$clr-base-offset-0: var(--clr-base-offset-0);
+
+$clr-base-vertical-offset-2xs: var(--clr-base-vertical-offset-2xs);
+$clr-base-vertical-offset-xs: var(--clr-base-vertical-offset-xs);
+$clr-base-vertical-offset-s: var(--clr-base-vertical-offset-s);
+$clr-base-vertical-offset-m: var(--clr-base-vertical-offset-m);
+$clr-base-vertical-offset-l: var(--clr-base-vertical-offset-l);
+$clr-base-vertical-offset-xl: var(--clr-base-vertical-offset-xl);
+$clr-base-vertical-offset-2xl: var(--clr-base-vertical-offset-2xl);
+$clr-base-vertical-offset-3xl: var(--clr-base-vertical-offset-3xl);
+
+$clr-base-vertical-offset-multi-row-s: var(--clr-base-vertical-offset-multi-row-s);
+$clr-base-vertical-offset-multi-row-m: var(--clr-base-vertical-offset-multi-row-m);
+$clr-base-vertical-offset-multi-row-inline-s: var(--clr-base-vertical-offset-multi-row-inline-s);
+$clr-base-vertical-offset-multi-row-inline-m: var(--clr-base-vertical-offset-multi-row-inline-m);
+$clr-base-vertical-offset-multi-row-outline-s: var(--clr-base-vertical-offset-multi-row-outline-s);
+$clr-base-vertical-offset-multi-row-outline-m: var(--clr-base-vertical-offset-multi-row-outline-m);
+
+$clr-base-horizontal-offset-2xs: var(--clr-base-horizontal-offset-2xs);
+$clr-base-horizontal-offset-xs: var(--clr-base-horizontal-offset-xs);
+$clr-base-horizontal-offset-s: var(--clr-base-horizontal-offset-s);
+$clr-base-horizontal-offset-m: var(--clr-base-horizontal-offset-m);
+$clr-base-horizontal-offset-l: var(--clr-base-horizontal-offset-l);
+$clr-base-horizontal-offset-xl: var(--clr-base-horizontal-offset-xl);
+$clr-base-horizontal-offset-2xl: var(--clr-base-horizontal-offset-2xl);
+$clr-base-horizontal-offset-3xl: var(--clr-base-horizontal-offset-3xl);
+
+$clr-base-row-height-xs: var(--clr-base-row-height-xs);
+$clr-base-row-height-s: var(--clr-base-row-height-s);
+$clr-base-row-height-m: var(--clr-base-row-height-m);
+$clr-base-row-height-l: var(--clr-base-row-height-l);
+$clr-base-row-height-20: var(--clr-base-row-height-20);
+$clr-base-dg-row-height: var(--clr-base-dg-row-height);
+$clr-base-dg-compact-row-height: var(--clr-base-dg-compact-row-height);
+
+$clr-base-gap-xs: var(--clr-base-gap-xs);
+$clr-base-gap-s: var(--clr-base-gap-s);
+$clr-base-gap-m: var(--clr-base-gap-m);
+$clr-base-gap-l: var(--clr-base-gap-l);
+$clr-base-gap-xl: var(--clr-base-gap-xl);
+$clr-base-gap-2xl: var(--clr-base-gap-2xl);
+
+$clr-base-icon-size-xs: var(--clr-base-icon-size-xs);
+$clr-base-icon-size-s: var(--clr-base-icon-size-s);
+$clr-base-icon-size-m: var(--clr-base-icon-size-m);
+$clr-base-icon-size-l: var(--clr-base-icon-size-l);
+$clr-base-icon-size-xl: var(--clr-base-icon-size-xl);
+$clr-base-icon-size-2xl: var(--clr-base-icon-size-2xl);
+$clr-base-icon-size-3xl: var(--clr-base-icon-size-3xl);
+$clr-base-icon-size-4xl: var(--clr-base-icon-size-4xl);
+
+$clr-base-layout-space-0: var(--clr-base-layout-space-0);
+$clr-base-layout-space-4xs: var(--clr-base-layout-space-4xs);
+$clr-base-layout-space-3xs: var(--clr-base-layout-space-3xs);
+$clr-base-layout-space-2xs: var(--clr-base-layout-space-2xs);
+$clr-base-layout-space-xs: var(--clr-base-layout-space-xs);
+$clr-base-layout-space-s: var(--clr-base-layout-space-s);
+$clr-base-layout-space-m: var(--clr-base-layout-space-m);
+$clr-base-layout-space-l: var(--clr-base-layout-space-l);
+$clr-base-layout-space-xl: var(--clr-base-layout-space-xl);
+$clr-base-layout-space-2xl: var(--clr-base-layout-space-2xl);
+$clr-base-layout-space-3xl: var(--clr-base-layout-space-3xl);
+$clr-base-layout-space-4xl: var(--clr-base-layout-space-4xl);
+$clr-base-layout-space-5xl: var(--clr-base-layout-space-5xl);
+
+$clr-base-icon-tooltip: var(--clr-base-icon-tooltip);
+
+$clr-base-spinner-s: var(--clr-base-spinner-s);
+$clr-base-spinner-m: var(--clr-base-spinner-m);
+$clr-base-spinner-l: var(--clr-base-spinner-l);
+
+$clr-base-spinner-stroke-s: var(--clr-base-spinner-stroke-s);
+$clr-base-spinner-stroke-m: var(--clr-base-spinner-stroke-m);
+$clr-base-spinner-stroke-l: var(--clr-base-spinner-stroke-l);
+
+$clr-base-header-height: var(--clr-base-header-height);
+$clr-base-tree-node-height: var(--clr-base-tree-node-height);
+
+$clr-base-progress-bar-height: var(--clr-base-progress-bar-height);
+
+$clr-base-control-group-gap: var(--clr-base-control-group-gap);

package/styles/variables/_variables.global.scss

@@ -0,0 +1,82 @@
+/*
+ * 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:math';
+@use '../core/tokens/variables.tokens' as tokens;
+@use 'variables.density' as density;
+
+// Usage: ../typography/_typography.clarity.scss
+$clr-baseline-int: 24 !default; // used by design for relational sizing
+$clr-baseline-denominator: 20 !default; // used in code to reduce impact of browser rounding
+$browser-default-size: 16; // if font-size set to 100% on html selector, it equates to 16px
+// this takes our sizing in code, divides it by the browser default at 100%
+// and then converts it to a percentage so that browser settings sizing is not broken
+$clr-basefont-size: math.div($clr-baseline-denominator, $browser-default-size) * 100% !default;
+
+@function convertBaselineToBase20($size: 24) {
+  $clr-baseline-to-basefontsize-multiplier: math.div($clr-baseline-int, $clr-baseline-denominator);
+
+  @return math.div($size, $clr-baseline-int) * $clr-baseline-to-basefontsize-multiplier * 1rem;
+}
+
+// App bg color
+$clr-global-app-background: var(--clr-global-app-background) !default;
+
+// App selection color
+$clr-global-selection-color: var(--clr-global-selection-color) !default;
+$clr-global-on-selection-color: var(--clr-global-on-selection-color) !default;
+
+// App hover color
+$clr-global-hover-color: var(--clr-global-hover-color) !default;
+$clr-global-content-header-font-color: var(--clr-global-content-header-font-color) !default;
+$clr-global-font-color: var(--clr-global-font-color) !default;
+$clr-global-success-color: var(--clr-global-success-color) !default;
+$clr-global-error-color: var(--clr-global-error-color) !default;
+
+// Content Area Paddings
+$clr-content-area-padding-top: #{density.$clr-base-vertical-offset-2xl} !default;
+$clr-content-area-padding-right: #{density.$clr-base-horizontal-offset-2xl} !default;
+$clr-content-area-padding-bottom: #{density.$clr-base-vertical-offset-2xl} !default;
+$clr-content-area-padding-left: #{density.$clr-base-horizontal-offset-2xl} !default;
+
+// Close button colors
+// Usage: ../emphasis/alert/_alert.clarity.scss
+// Usage: ../modal/_modal.clarity.scss
+// Usage: ../popover/signpost/_signpost.clarity.scss
+$clr-close-color: var(--clr-close-color) !default;
+$clr-close-color-hover: var(--clr-close-color-hover) !default;
+$clr-close-color-active: var(--clr-close-color-active) !default;
+
+// Box Shadow
+$clr-popover-box-shadow-color: rgb(140 140 140 / 25%) !default;
+
+// All z-indexes should come from here, to have a centralized file to reorganize them if needed
+$clr-layers: (
+  content: 0,
+  select-box: 2,
+  datalist-box: 2,
+  datagrid-row: 500,
+  datagrid-row-sticky: 500,
+  datagrid-row-skeleton: 501,
+  datagrid-header: 501,
+  datagrid-header-sticky: 502,
+  datagrid-host: 590,
+  alert: 1033,
+  // Used by responsive nav sidepanel
+  sidepanel-bg: 1038,
+  sidepanel: 1039,
+  // Not used in Clarity but released by mistake in 17.2.0 and already consumed by teams through NGX
+  // see https://jira.eng.vmware.com/browse/CDE-2109
+  side-panel-bg: 1038,
+  side-panel: 1039,
+  modal-bg: 1040,
+  modal: 1050,
+  dropdown-menu: 1050,
+  column-switch: 1050,
+  tooltips: 1050,
+  smart-popover: 1050,
+) !default;