@rossigee/clarity-ui 18.2.1-fixed

package/styles/core/theme.dark.scss

@@ -0,0 +1,266 @@
+/*
+ * 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 './tokens/variables.tokens' as tokens;
+
+[cds-theme~='dark'] {
+  // typography
+  --cds-alias-typography-color-100: #{tokens.$cds-global-color-black};
+  --cds-alias-typography-color-200: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-typography-color-300: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-typography-color-400: #{tokens.$cds-global-color-construction-100};
+  --cds-alias-typography-color-450: #{tokens.$cds-global-color-construction-50};
+  --cds-alias-typography-color-500: #{tokens.$cds-global-color-white};
+  --cds-alias-typography-disabled-button: #{tokens.$cds-global-color-construction-900};
+  --cds-alias-typography-disabled: #{tokens.$cds-global-color-construction-500};
+  --cds-alias-typography-info-hover: #{tokens.$cds-global-color-blue-200};
+  --cds-alias-typography-success-hover: #{tokens.$cds-global-color-green-400};
+  --cds-alias-typography-warning-hover: #{tokens.$cds-global-color-yellow-600};
+  --cds-alias-typography-danger-hover: #{tokens.$cds-global-color-red-400};
+  --cds-alias-typography-neutral-hover: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-typography-link-on-colorbg: #{tokens.$cds-global-color-construction-1000};
+  --cds-alias-typography-link-color: #{tokens.$cds-global-color-blue-400};
+  --cds-alias-typography-link-color-hover: #{tokens.$cds-global-color-blue-200};
+  --cds-alias-typography-link-color-visited: #{tokens.$cds-global-color-violet-300};
+  --cds-alias-typography-link-color-visited-hover: #{tokens.$cds-global-color-violet-200};
+  --cds-alias-typography-link-color-active: #{tokens.$cds-global-color-red-600};
+
+  // object
+  --cds-alias-object-app-background: #{tokens.$cds-global-color-construction-1000};
+  --cds-alias-object-container-backdrop-background: #{tokens.$cds-alias-object-opacity-300};
+  --cds-alias-object-container-background: #{tokens.$cds-global-color-construction-900};
+  --cds-alias-object-container-background-tint: #{tokens.$cds-global-color-construction-1000};
+  --cds-alias-object-container-background-shade: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-container-background-dark: #{tokens.$cds-global-color-construction-1100};
+  --cds-alias-object-container-background-inverse: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-container-background-inverse-tint: #{tokens.$cds-global-color-construction-100};
+  --cds-alias-object-container-background-inverse-shade: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-object-container-border-color: #{tokens.$cds-global-color-black};
+  --cds-alias-object-overlay-background: #{tokens.$cds-global-color-construction-900};
+  --cds-alias-object-border-color: #{tokens.$cds-global-color-construction-500};
+  --cds-alias-object-border-color-tint: #{tokens.$cds-global-color-construction-400};
+  --cds-alias-object-border-color-shade: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-shadow-100: 0 #{tokens.$cds-global-space-1} #{tokens.$cds-global-space-2} 0
+    #{tokens.$cds-alias-object-opacity-300};
+  --cds-alias-object-shadow-200: 0 #{tokens.$cds-global-space-1} #{tokens.$cds-global-space-2} 0
+    #{tokens.$cds-alias-object-opacity-200};
+  --cds-alias-object-shadow-300: 0 #{tokens.$cds-global-space-1} #{tokens.$cds-global-space-2} 0
+    #{tokens.$cds-alias-object-opacity-100};
+  --cds-alias-object-interaction-color: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-interaction-color-hover: #{tokens.$cds-global-color-construction-50};
+  --cds-alias-object-interaction-color-active: #{tokens.$cds-global-color-construction-100};
+  --cds-alias-object-interaction-color-selected: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-interaction-color-disabled: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-interaction-background: #{tokens.$cds-global-color-construction-1000};
+  --cds-alias-object-interaction-background-hover: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-interaction-background-active: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-interaction-background-selected: #{tokens.$cds-global-color-blue-900};
+  --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-700};
+  --cds-alias-object-interaction-background-disabled: #{tokens.$cds-global-color-construction-700};
+  --cds-alias-object-interaction-background-highlight: #{tokens.$cds-global-color-blue-400};
+  --cds-alias-object-interaction-background-shade: #{tokens.$cds-global-color-construction-1100};
+  --cds-alias-object-interaction-background-shade-hover: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-interaction-background-shade-active: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-interaction-background-shade-selected: #{tokens.$cds-global-color-construction-700};
+  --cds-alias-object-interaction-background-shade-selected-hover: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-interaction-background-shade-selected-active: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-interaction-border-color: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-object-interaction-info-hover: #{tokens.$cds-global-color-blue-300};
+  --cds-alias-object-interaction-info-active: #{tokens.$cds-global-color-blue-500};
+  --cds-alias-object-interaction-info-selected: #{tokens.$cds-global-color-blue-500};
+  --cds-alias-object-interaction-info-click: #{tokens.$cds-global-color-blue-500}; // deprecated in favor of active. To be removed in next major release.
+  --cds-alias-object-interaction-info-secondary-hover: #{tokens.$cds-global-color-blue-1000};
+  --cds-alias-object-interaction-success-hover: #{tokens.$cds-global-color-green-400};
+  --cds-alias-object-interaction-success-active: #{tokens.$cds-global-color-green-600};
+  --cds-alias-object-interaction-success-click: #{tokens.$cds-global-color-green-600}; // deprecated in favor of active. To be removed in next major release.
+  --cds-alias-object-interaction-success-secondary-hover: #{tokens.$cds-global-color-green-1000};
+  --cds-alias-object-interaction-warning-hover: #{tokens.$cds-global-color-yellow-300};
+  --cds-alias-object-interaction-warning-active: #{tokens.$cds-global-color-yellow-500};
+  --cds-alias-object-interaction-warning-click: #{tokens.$cds-global-color-yellow-500}; // deprecated in favor of active. To be removed in next major release.
+  --cds-alias-object-interaction-warning-secondary-hover: #{tokens.$cds-global-color-yellow-1000};
+  --cds-alias-object-interaction-danger-hover: #{tokens.$cds-global-color-red-400};
+  --cds-alias-object-interaction-danger-active: #{tokens.$cds-global-color-red-600};
+  --cds-alias-object-interaction-danger-click: #{tokens.$cds-global-color-red-600}; // deprecated in favor of active. To be removed in next major release.
+  --cds-alias-object-interaction-danger-secondary-hover: #{tokens.$cds-global-color-red-1000};
+  --cds-alias-object-interaction-neutral-hover: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-interaction-neutral-active: #{tokens.$cds-global-color-construction-400};
+  --cds-alias-object-interaction-neutral-click: #{tokens.$cds-global-color-construction-400}; // deprecated in favor of active. To be removed in next major release.
+  --cds-alias-object-interaction-neutral-secondary-hover: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-interaction-inverse-hover: #{tokens.$cds-global-color-construction-700};
+  --cds-alias-object-interaction-inverse-active: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-interaction-inverse-click: #{tokens.$cds-global-color-construction-800}; // deprecated in favor of active. To be removed in next major release.
+
+  // skeleton loading gradient
+  --cds-alias-object-skeleton-loading-gradient: linear-gradient(
+    90deg,
+    #{tokens.$cds-alias-object-interaction-background} 0%,
+    #{tokens.$cds-global-color-construction-500} 35%,
+    #{tokens.$cds-global-color-construction-400} 65%,
+    #{tokens.$cds-alias-object-interaction-background} 100%
+  );
+
+  // status
+  --cds-alias-status-tint: transparent;
+  --cds-alias-status-info: #{tokens.$cds-global-color-blue-400};
+  --cds-alias-status-info-tint: #{tokens.$cds-global-color-blue-800};
+  --cds-alias-status-info-shade: #{tokens.$cds-global-color-blue-500};
+  --cds-alias-status-success: #{tokens.$cds-global-color-green-500};
+  --cds-alias-status-success-tint: #{tokens.$cds-global-color-green-800};
+  --cds-alias-status-success-shade: #{tokens.$cds-global-color-green-600};
+  --cds-alias-status-warning: #{tokens.$cds-global-color-ochre-400};
+  --cds-alias-status-warning-tint: #{tokens.$cds-global-color-ochre-900};
+  --cds-alias-status-warning-shade: #{tokens.$cds-global-color-ochre-500};
+  --cds-alias-status-warning-dark: #{tokens.$cds-global-color-ochre-600};
+  --cds-alias-status-danger: #{tokens.$cds-global-color-red-500};
+  --cds-alias-status-danger-tint: #{tokens.$cds-global-color-red-900};
+  --cds-alias-status-danger-shade: #{tokens.$cds-global-color-red-600};
+  --cds-alias-status-danger-dark: #{tokens.$cds-global-color-red-900};
+  --cds-alias-status-neutral: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-status-neutral-tint: #{tokens.$cds-global-color-construction-700};
+  --cds-alias-status-neutral-shade: #{tokens.$cds-global-color-construction-400};
+  --cds-alias-status-disabled: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-status-disabled-tint: #{tokens.$cds-global-color-construction-700};
+  --cds-alias-status-disabled-shade: #{tokens.$cds-global-color-construction-500};
+
+  //utility
+  --cds-alias-utility-gray: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-utility-gray-tint: #{tokens.$cds-global-color-construction-1000};
+  --cds-alias-utility-gray-shade: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-utility-blue: #{tokens.$cds-global-color-blue-300};
+  --cds-alias-utility-blue-tint: #{tokens.$cds-global-color-blue-1000};
+  --cds-alias-utility-blue-shade: #{tokens.$cds-global-color-blue-200};
+  --cds-alias-utility-light-blue: #{tokens.$cds-global-color-blue-700};
+  --cds-alias-utility-light-blue-tint: #{tokens.$cds-global-color-blue-1000};
+  --cds-alias-utility-light-blue-shade: #{tokens.$cds-global-color-blue-500};
+  --cds-alias-utility-dark-blue: #{tokens.$cds-global-color-azure-200};
+  --cds-alias-utility-dark-blue-tint: #{tokens.$cds-global-color-azure-1000};
+  --cds-alias-utility-dark-blue-shade: #{tokens.$cds-global-color-azure-50};
+  --cds-alias-utility-green: #{tokens.$cds-global-color-green-400};
+  --cds-alias-utility-green-tint: #{tokens.$cds-global-color-green-1000};
+  --cds-alias-utility-green-shade: #{tokens.$cds-global-color-green-200};
+  --cds-alias-utility-yellow: #{tokens.$cds-global-color-ochre-400};
+  --cds-alias-utility-yellow-tint: #{tokens.$cds-global-color-ochre-900};
+  --cds-alias-utility-yellow-shade: #{tokens.$cds-global-color-ochre-300};
+  --cds-alias-utility-red: #{tokens.$cds-global-color-red-500};
+  --cds-alias-utility-red-tint: #{tokens.$cds-global-color-red-1000};
+  --cds-alias-utility-red-shade: #{tokens.$cds-global-color-red-200};
+  --cds-alias-utility-tangerine: #{tokens.$cds-global-color-tangerine-600};
+  --cds-alias-utility-tangerine-tint: #{tokens.$cds-global-color-tangerine-1000};
+  --cds-alias-utility-tangerine-shade: #{tokens.$cds-global-color-tangerine-400};
+  --cds-alias-utility-violet: #{tokens.$cds-global-color-violet-400};
+  --cds-alias-utility-violet-tint: #{tokens.$cds-global-color-violet-1000};
+  --cds-alias-utility-violet-shade: #{tokens.$cds-global-color-violet-200};
+
+  // viz
+  --cds-alias-viz-border: #{tokens.$cds-global-color-cool-gray-50};
+  --cds-alias-viz-general-1: #{tokens.$cds-global-color-blue-400};
+  --cds-alias-viz-general-1-blue: #{tokens.$cds-global-color-blue-400};
+  --cds-alias-viz-general-2: #{tokens.$cds-global-color-violet-500};
+  --cds-alias-viz-general-2-violet: #{tokens.$cds-global-color-violet-400};
+  --cds-alias-viz-general-3: #{tokens.$cds-global-color-aqua-200};
+  --cds-alias-viz-general-3-aqua: #{tokens.$cds-global-color-aqua-200};
+  --cds-alias-viz-general-4: #{tokens.$cds-global-color-lavender-400};
+  --cds-alias-viz-general-4-lime: #{tokens.$cds-global-color-lime-300};
+  --cds-alias-viz-general-5: #{tokens.$cds-global-color-pink-400};
+  --cds-alias-viz-general-5-blue: #{tokens.$cds-global-color-blue-200};
+  --cds-alias-viz-general-6: #{tokens.$cds-global-color-lime-400};
+  --cds-alias-viz-general-6-aqua: #{tokens.$cds-global-color-aqua-50};
+  --cds-alias-viz-general-7: #{tokens.$cds-global-color-lavender-300};
+  --cds-alias-viz-general-7-violet: #{tokens.$cds-global-color-violet-200};
+  --cds-alias-viz-general-8: #{tokens.$cds-global-color-aqua-400};
+  --cds-alias-viz-general-8-lime: #{tokens.$cds-global-color-lime-100};
+  --cds-alias-viz-general-9: #{tokens.$cds-global-color-lime-200};
+  --cds-alias-viz-general-9-blue: #{tokens.$cds-global-color-blue-300};
+  --cds-alias-viz-general-10: #{tokens.$cds-global-color-violet-300};
+  --cds-alias-viz-general-10-lime: #{tokens.$cds-global-color-lime-50};
+  --cds-alias-viz-general-11: #{tokens.$cds-global-color-jade-400};
+  --cds-alias-viz-general-11-aqua: #{tokens.$cds-global-color-aqua-400};
+  --cds-alias-viz-general-12: #{tokens.$cds-global-color-azure-100};
+  --cds-alias-viz-general-12-violet: #{tokens.$cds-global-color-violet-50};
+  --cds-alias-viz-general-13: #{tokens.$cds-global-color-violet-400};
+  --cds-alias-viz-general-13-violet: #{tokens.$cds-global-color-violet-300};
+  --cds-alias-viz-general-14: #{tokens.$cds-global-color-green-200};
+  --cds-alias-viz-general-14-blue: #{tokens.$cds-global-color-blue-50};
+  --cds-alias-viz-general-15: #{tokens.$cds-global-color-pink-300};
+  --cds-alias-viz-general-15-aqua: #{tokens.$cds-global-color-aqua-300};
+  --cds-alias-viz-general-16: #{tokens.$cds-global-color-azure-300};
+  --cds-alias-viz-general-16-lime: #{tokens.$cds-global-color-lime-200};
+  --cds-alias-viz-severity-neutral: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-viz-severity-success: #{tokens.$cds-global-color-green-500};
+  --cds-alias-viz-severity-warning: #{tokens.$cds-global-color-yellow-300};
+  --cds-alias-viz-severity-warning-light: #{tokens.$cds-global-color-yellow-300};
+  --cds-alias-viz-severity-immediate: #{tokens.$cds-global-color-tangerine-400};
+  --cds-alias-viz-severity-critical: #{tokens.$cds-global-color-red-700};
+  --cds-alias-viz-severity-free-space-fill: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-viz-sequential-blue-50: #{tokens.$cds-global-color-blue-1000};
+  --cds-alias-viz-sequential-blue-100: #{tokens.$cds-global-color-blue-900};
+  --cds-alias-viz-sequential-blue-200: #{tokens.$cds-global-color-blue-800};
+  --cds-alias-viz-sequential-blue-300: #{tokens.$cds-global-color-blue-700};
+  --cds-alias-viz-sequential-blue-400: #{tokens.$cds-global-color-blue-600};
+  --cds-alias-viz-sequential-blue-500: #{tokens.$cds-global-color-blue-500};
+  --cds-alias-viz-sequential-blue-600: #{tokens.$cds-global-color-blue-400};
+  --cds-alias-viz-sequential-blue-700: #{tokens.$cds-global-color-blue-300};
+  --cds-alias-viz-sequential-blue-800: #{tokens.$cds-global-color-blue-200};
+  --cds-alias-viz-sequential-blue-900: #{tokens.$cds-global-color-blue-100};
+  --cds-alias-viz-sequential-blue-1000: #{tokens.$cds-global-color-blue-50};
+  --cds-alias-viz-sequential-violet-50: #{tokens.$cds-global-color-violet-1000};
+  --cds-alias-viz-sequential-violet-100: #{tokens.$cds-global-color-violet-900};
+  --cds-alias-viz-sequential-violet-200: #{tokens.$cds-global-color-violet-800};
+  --cds-alias-viz-sequential-violet-300: #{tokens.$cds-global-color-violet-700};
+  --cds-alias-viz-sequential-violet-400: #{tokens.$cds-global-color-violet-600};
+  --cds-alias-viz-sequential-violet-500: #{tokens.$cds-global-color-violet-500};
+  --cds-alias-viz-sequential-violet-600: #{tokens.$cds-global-color-violet-400};
+  --cds-alias-viz-sequential-violet-700: #{tokens.$cds-global-color-violet-300};
+  --cds-alias-viz-sequential-violet-800: #{tokens.$cds-global-color-violet-200};
+  --cds-alias-viz-sequential-violet-900: #{tokens.$cds-global-color-violet-100};
+  --cds-alias-viz-sequential-violet-1000: #{tokens.$cds-global-color-violet-50};
+  --cds-alias-viz-sequential-ochre-50: #{tokens.$cds-global-color-ochre-1000};
+  --cds-alias-viz-sequential-ochre-100: #{tokens.$cds-global-color-ochre-900};
+  --cds-alias-viz-sequential-ochre-200: #{tokens.$cds-global-color-ochre-800};
+  --cds-alias-viz-sequential-ochre-300: #{tokens.$cds-global-color-ochre-700};
+  --cds-alias-viz-sequential-ochre-400: #{tokens.$cds-global-color-ochre-600};
+  --cds-alias-viz-sequential-ochre-500: #{tokens.$cds-global-color-ochre-500};
+  --cds-alias-viz-sequential-ochre-600: #{tokens.$cds-global-color-ochre-400};
+  --cds-alias-viz-sequential-ochre-700: #{tokens.$cds-global-color-ochre-300};
+  --cds-alias-viz-sequential-ochre-800: #{tokens.$cds-global-color-ochre-200};
+  --cds-alias-viz-sequential-ochre-900: #{tokens.$cds-global-color-ochre-100};
+  --cds-alias-viz-sequential-ochre-1000: #{tokens.$cds-global-color-ochre-50};
+  --cds-alias-viz-sequential-aqua-50: #{tokens.$cds-global-color-aqua-1000};
+  --cds-alias-viz-sequential-aqua-100: #{tokens.$cds-global-color-aqua-900};
+  --cds-alias-viz-sequential-aqua-200: #{tokens.$cds-global-color-aqua-800};
+  --cds-alias-viz-sequential-aqua-300: #{tokens.$cds-global-color-aqua-700};
+  --cds-alias-viz-sequential-aqua-400: #{tokens.$cds-global-color-aqua-600};
+  --cds-alias-viz-sequential-aqua-500: #{tokens.$cds-global-color-aqua-500};
+  --cds-alias-viz-sequential-aqua-600: #{tokens.$cds-global-color-aqua-400};
+  --cds-alias-viz-sequential-aqua-700: #{tokens.$cds-global-color-aqua-300};
+  --cds-alias-viz-sequential-aqua-800: #{tokens.$cds-global-color-aqua-200};
+  --cds-alias-viz-sequential-aqua-900: #{tokens.$cds-global-color-aqua-100};
+  --cds-alias-viz-sequential-aqua-1000: #{tokens.$cds-global-color-aqua-50};
+  --cds-alias-viz-sequential-green-50: #{tokens.$cds-global-color-green-1000};
+  --cds-alias-viz-sequential-green-100: #{tokens.$cds-global-color-green-900};
+  --cds-alias-viz-sequential-green-200: #{tokens.$cds-global-color-green-800};
+  --cds-alias-viz-sequential-green-300: #{tokens.$cds-global-color-green-700};
+  --cds-alias-viz-sequential-green-400: #{tokens.$cds-global-color-green-600};
+  --cds-alias-viz-sequential-green-500: #{tokens.$cds-global-color-green-500};
+  --cds-alias-viz-sequential-green-600: #{tokens.$cds-global-color-green-400};
+  --cds-alias-viz-sequential-green-700: #{tokens.$cds-global-color-green-300};
+  --cds-alias-viz-sequential-green-800: #{tokens.$cds-global-color-green-200};
+  --cds-alias-viz-sequential-green-900: #{tokens.$cds-global-color-green-100};
+  --cds-alias-viz-sequential-green-1000: #{tokens.$cds-global-color-green-50};
+  --cds-alias-viz-sequential-red-50: #{tokens.$cds-global-color-red-1000};
+  --cds-alias-viz-sequential-red-100: #{tokens.$cds-global-color-red-900};
+  --cds-alias-viz-sequential-red-200: #{tokens.$cds-global-color-red-800};
+  --cds-alias-viz-sequential-red-300: #{tokens.$cds-global-color-red-700};
+  --cds-alias-viz-sequential-red-400: #{tokens.$cds-global-color-red-600};
+  --cds-alias-viz-sequential-red-500: #{tokens.$cds-global-color-red-500};
+  --cds-alias-viz-sequential-red-600: #{tokens.$cds-global-color-red-400};
+  --cds-alias-viz-sequential-red-700: #{tokens.$cds-global-color-red-300};
+  --cds-alias-viz-sequential-red-800: #{tokens.$cds-global-color-red-200};
+  --cds-alias-viz-sequential-red-900: #{tokens.$cds-global-color-red-100};
+  --cds-alias-viz-sequential-red-1000: #{tokens.$cds-global-color-red-50};
+}

package/styles/core/theme.high-contrast.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 './tokens/properties.tokens';
+
+[cds-theme~='high-contrast'] {
+  --cds-alias-typography-color-500: CanvasText;
+  --cds-alias-typography-color-400: CanvasText;
+  --cds-alias-typography-color-300: CanvasText;
+  --cds-alias-typography-link-color: LinkText;
+  --cds-alias-typography-link-color-hover: ActiveText;
+  --cds-alias-typography-link-color-visited: VisitedText;
+  --cds-alias-typography-link-color-visited-hover: VisitedText;
+  --cds-alias-status-info: CanvasText;
+  --cds-alias-status-success: CanvasText;
+  --cds-alias-status-warning: CanvasText;
+  --cds-alias-status-danger: CanvasText;
+  --cds-alias-status-neutral: GrayText;
+  --cds-alias-status-neutral-tint: GrayText;
+  --cds-alias-status-neutral-shade: GrayText;
+  --cds-alias-object-border-color: CanvasText;
+  --cds-alias-object-border-color-tint: CanvasText;
+  --cds-alias-object-border-color-shade: CanvasText;
+  --cds-alias-object-container-border-color: CanvasText;
+  --cds-alias-object-app-background: Canvas;
+  --cds-alias-object-interaction-color: ButtonText;
+  --cds-alias-object-interaction-color-hover: HighlightText;
+  --cds-alias-object-interaction-color-active: ActiveText;
+  --cds-alias-object-interaction-color-selected: SelectedItemText;
+  --cds-alias-object-interaction-color-disabled: GrayText;
+  --cds-alias-object-interaction-border-color: CanvasText;
+  --cds-alias-object-interaction-background: ButtonFace;
+  --cds-alias-object-interaction-background-hover: Highlight;
+  --cds-alias-object-interaction-background-active: Highlight;
+  --cds-alias-object-interaction-background-selected: SelectedItem;
+  --cds-alias-object-interaction-background-disabled: Canvas;
+  --cds-alias-object-interaction-background-highlight: Highlight;
+}

package/styles/core/theme.low-motion.scss

@@ -0,0 +1,20 @@
+/*
+ * 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 './tokens/properties.tokens';
+
+[cds-theme~='low-motion'] {
+  --cds-global-animation-duration-instant: 0;
+  --cds-global-animation-duration-quickest: 0;
+  --cds-global-animation-duration-quicker: 0;
+  --cds-global-animation-duration-quick: 0;
+  --cds-global-animation-duration-secondary: 0;
+  --cds-global-animation-duration-primary: 0;
+  --cds-global-animation-duration-slow: 2s;
+  --cds-global-animation-duration-slower: 2s;
+  --cds-global-animation-duration-slowest: 2s;
+}

package/styles/core/tokens/_alias-interaction.scss

@@ -0,0 +1,59 @@
+/*
+ * 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';
+
+@include mixins.root-or-host() {
+  --cds-alias-object-interaction-outline: Highlight auto 2px;
+  --cds-alias-object-interaction-outline-webkit: 5px auto -webkit-focus-ring-color;
+  --cds-alias-object-interaction-outline-offset: 1px;
+  --cds-alias-object-interaction-touch-target: calc(36 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-interaction-border-color: var(--cds-global-color-construction-500);
+  --cds-alias-object-interaction-background: var(--cds-global-color-white);
+  --cds-alias-object-interaction-background-hover: var(--cds-global-color-construction-50);
+  --cds-alias-object-interaction-background-active: var(--cds-global-color-construction-100);
+  --cds-alias-object-interaction-background-selected: var(--cds-global-color-blue-75);
+  --cds-alias-object-interaction-background-selected-hover: var(--cds-global-color-construction-100);
+  --cds-alias-object-interaction-background-selected-active: var(--cds-global-color-construction-200);
+  --cds-alias-object-interaction-background-disabled: var(--cds-global-color-white);
+  --cds-alias-object-interaction-background-highlight: var(--cds-global-color-blue-700);
+  --cds-alias-object-interaction-background-shade: var(--cds-global-color-cool-gray-50);
+  --cds-alias-object-interaction-background-shade-hover: var(--cds-global-color-construction-100);
+  --cds-alias-object-interaction-background-shade-active: var(--cds-global-color-blue-75);
+  --cds-alias-object-interaction-background-shade-selected: var(--cds-global-color-white);
+  --cds-alias-object-interaction-background-shade-selected-hover: var(--cds-global-color-construction-100);
+  --cds-alias-object-interaction-background-shade-selected-active: var(--cds-global-color-construction-200);
+  --cds-alias-object-interaction-color: var(--cds-global-color-construction-700);
+  --cds-alias-object-interaction-color-hover: var(--cds-global-color-construction-1000);
+  --cds-alias-object-interaction-color-active: var(--cds-global-color-construction-1000);
+  --cds-alias-object-interaction-color-selected: var(--cds-global-color-construction-700);
+  --cds-alias-object-interaction-color-disabled: var(--cds-global-color-construction-300);
+  --cds-alias-object-interaction-info-hover: var(--cds-global-color-blue-800);
+  --cds-alias-object-interaction-info-click: var(--cds-global-color-blue-900);
+  --cds-alias-object-interaction-info-active: var(--cds-global-color-blue-900);
+  --cds-alias-object-interaction-info-selected: var(--cds-global-color-blue-900);
+  --cds-alias-object-interaction-info-secondary-hover: var(--cds-global-color-blue-50);
+  --cds-alias-object-interaction-success-hover: var(--cds-global-color-green-800);
+  --cds-alias-object-interaction-success-click: var(--cds-global-color-green-900);
+  --cds-alias-object-interaction-success-active: var(--cds-global-color-green-900);
+  --cds-alias-object-interaction-success-secondary-hover: var(--cds-global-color-green-50);
+  --cds-alias-object-interaction-warning-hover: var(--cds-global-color-ochre-600);
+  --cds-alias-object-interaction-warning-click: var(--cds-global-color-ochre-700);
+  --cds-alias-object-interaction-warning-active: var(--cds-global-color-ochre-700);
+  --cds-alias-object-interaction-warning-secondary-hover: var(--cds-global-color-ochre-50);
+  --cds-alias-object-interaction-danger-hover: var(--cds-global-color-red-800);
+  --cds-alias-object-interaction-danger-click: var(--cds-global-color-red-900);
+  --cds-alias-object-interaction-danger-active: var(--cds-global-color-red-900);
+  --cds-alias-object-interaction-danger-secondary-hover: var(--cds-global-color-red-50);
+  --cds-alias-object-interaction-neutral-hover: var(--cds-global-color-construction-700);
+  --cds-alias-object-interaction-neutral-click: var(--cds-global-color-construction-800);
+  --cds-alias-object-interaction-neutral-active: var(--cds-global-color-construction-800);
+  --cds-alias-object-interaction-neutral-secondary-hover: var(--cds-global-color-construction-50);
+  --cds-alias-object-interaction-inverse-hover: var(--cds-global-color-construction-600);
+  --cds-alias-object-interaction-inverse-click: var(--cds-global-color-construction-800);
+  --cds-alias-object-interaction-inverse-active: var(--cds-global-color-construction-800);
+}

package/styles/core/tokens/_alias-object-background.scss

@@ -0,0 +1,14 @@
+/*
+ * 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';
+
+@include mixins.root-or-host() {
+  --cds-alias-object-app-background: var(--cds-global-color-construction-25);
+  --cds-alias-object-overlay-background: var(--cds-global-color-white);
+  --cds-alias-object-overlay-backdrop-background: hsl(0deg 0% 0% / 60%);
+}

package/styles/core/tokens/_alias-object-border.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';
+
+@include mixins.root-or-host() {
+  --cds-alias-object-border-radius-100: calc(4 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-border-radius-200: calc(12 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-border-radius-300: 50%;
+  --cds-alias-object-border-width-100: calc(1 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-border-width-200: calc(2 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-border-width-300: calc(3 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-border-width-400: calc(4 * (1rem / var(--cds-global-base)));
+  --cds-alias-object-border-color: var(--cds-global-color-construction-200);
+  --cds-alias-object-border-color-tint: var(--cds-global-color-construction-100);
+  --cds-alias-object-border-color-shade: var(--cds-global-color-construction-300);
+}

package/styles/core/tokens/_alias-object-container.scss

@@ -0,0 +1,20 @@
+/*
+ * 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';
+
+@include mixins.root-or-host() {
+  --cds-alias-object-container-background: var(--cds-global-color-white);
+  --cds-alias-object-container-background-tint: var(--cds-global-color-construction-50);
+  --cds-alias-object-container-background-shade: var(--cds-global-color-construction-100);
+  --cds-alias-object-container-background-dark: var(--cds-global-color-cool-gray-50);
+  --cds-alias-object-container-background-inverse: var(--cds-global-color-construction-600);
+  --cds-alias-object-container-background-inverse-tint: var(--cds-global-color-construction-800);
+  --cds-alias-object-container-background-inverse-shade: var(--cds-global-color-construction-500);
+  --cds-alias-object-container-backdrop-background: hsl(0deg 0% 100% / 60%);
+  --cds-alias-object-container-border-color: var(--cds-global-color-construction-200);
+}

package/styles/core/tokens/_alias-object-opacity.scss

@@ -0,0 +1,15 @@
+/*
+ * 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';
+
+@include mixins.root-or-host() {
+  --cds-alias-object-opacity-0: hsl(0deg 0% 0% / 0%);
+  --cds-alias-object-opacity-100: hsl(0deg 0% 0% / 20%);
+  --cds-alias-object-opacity-200: hsl(0deg 0% 0% / 40%);
+  --cds-alias-object-opacity-300: hsl(0deg 0% 0% / 60%);
+}

package/styles/core/tokens/_alias-object-shadow.scss

@@ -0,0 +1,17 @@
+/*
+ * 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';
+
+@include mixins.root-or-host() {
+  --cds-alias-object-shadow-100: 0 calc((1 / var(--cds-global-base, 20)) * 1rem)
+    calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsl(198deg 30% 15% / 50%);
+  --cds-alias-object-shadow-200: 0 calc((1 / var(--cds-global-base, 20)) * 1rem)
+    calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsl(198deg 30% 15% / 30%);
+  --cds-alias-object-shadow-300: 0 calc((1 / var(--cds-global-base, 20)) * 1rem)
+    calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsl(198deg 30% 15% / 20%);
+}

package/styles/core/tokens/_alias-status.scss

@@ -0,0 +1,34 @@
+/*
+ * 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';
+
+@include mixins.root-or-host() {
+  --cds-alias-status-info: var(--cds-global-color-blue-700);
+  --cds-alias-status-info-tint: var(--cds-global-color-blue-50);
+  --cds-alias-status-info-shade: var(--cds-global-color-blue-800);
+  --cds-alias-status-success: var(--cds-global-color-green-700);
+  --cds-alias-status-success-tint: var(--cds-global-color-green-50);
+  --cds-alias-status-success-shade: var(--cds-global-color-green-800);
+  --cds-alias-status-warning: var(--cds-global-color-ochre-500);
+  --cds-alias-status-warning-tint: var(--cds-global-color-ochre-100);
+  --cds-alias-status-warning-shade: var(--cds-global-color-ochre-600);
+  --cds-alias-status-warning-dark: var(--cds-global-color-ochre-800);
+  --cds-alias-status-danger: var(--cds-global-color-red-700);
+  --cds-alias-status-danger-tint: var(--cds-global-color-red-50);
+  --cds-alias-status-danger-shade: var(--cds-global-color-red-800);
+  --cds-alias-status-danger-dark: var(--cds-global-color-red-900);
+  --cds-alias-status-neutral: var(--cds-global-color-construction-600);
+  --cds-alias-status-neutral-tint: var(--cds-global-color-construction-50);
+  --cds-alias-status-neutral-shade: var(--cds-global-color-construction-700);
+  --cds-alias-status-disabled: var(--cds-global-color-construction-300);
+  --cds-alias-status-disabled-tint: var(--cds-global-color-construction-200);
+  --cds-alias-status-disabled-shade: var(--cds-global-color-construction-400);
+  --cds-alias-status-alt: var(--cds-global-color-violet-700);
+  --cds-alias-status-alt-tint: var(--cds-global-color-violet-600);
+  --cds-alias-status-alt-shade: var(--cds-global-color-violet-900);
+}

package/styles/core/tokens/_alias-typography.scss

@@ -0,0 +1,101 @@
+/*
+ * 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/variables.density' as density;
+@use '../../mixins';
+
+@include mixins.root-or-host() {
+  --cds-alias-typography-color-100: var(--cds-global-color-white);
+  --cds-alias-typography-color-200: var(--cds-global-color-construction-600);
+  --cds-alias-typography-color-300: var(--cds-global-color-construction-800);
+  --cds-alias-typography-color-400: var(--cds-global-color-construction-900);
+  --cds-alias-typography-color-450: var(--cds-global-color-construction-1000);
+  --cds-alias-typography-color-500: var(--cds-global-color-black);
+  --cds-alias-typography-font-weight-light: 300;
+  --cds-alias-typography-font-weight-regular: 400;
+  --cds-alias-typography-font-weight-medium: 500;
+  --cds-alias-typography-font-weight-semibold: 600;
+  --cds-alias-typography-font-weight-bold: 600;
+  --cds-alias-typography-font-weight-extrabold: 600;
+  --cds-alias-typography-font-size-0: calc(10 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-1: calc(11 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-2: calc(12 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-3: calc(13 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-4: calc(14 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-5: calc(16 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-6: calc(20 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-7: calc(24 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-8: calc(32 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-size-9: calc(40 * var(--cds-internal-scale-3));
+  --cds-alias-typography-font-family: 'Metropolis', 'Avenir Next', sans-serif;
+  --cds-alias-typography-header-font-family: 'Metropolis', 'Avenir Next', sans-serif;
+  --cds-alias-typography-monospace-font-family: ui-monospace, Consolas, Menlo, Monaco, monospace;
+  --cds-alias-typography-top-gap-height: 0.1475em;
+  --cds-alias-typography-ascender-height: 0.1703em;
+  --cds-alias-typography-x-height: 0.517em;
+  --cds-alias-typography-link-color: var(--cds-global-color-blue-800);
+  --cds-alias-typography-link-color-hover: var(--cds-global-color-blue-900);
+  --cds-alias-typography-link-color-active: var(--cds-global-color-red-700);
+  --cds-alias-typography-link-color-visited: var(--cds-global-color-violet-700);
+  --cds-alias-typography-link-color-visited-hover: var(--cds-global-color-violet-1000);
+  --cds-alias-typography-link-on-colorbg: var(--cds-global-color-black);
+  --cds-alias-typography-body-letter-spacing: -0.00714286em;
+  --cds-alias-typography-body-font-weight: 400;
+  --cds-alias-typography-display-letter-spacing: -0.0125em;
+  --cds-alias-typography-display-font-weight: 500;
+  --cds-alias-typography-heading-letter-spacing: -0.0125em;
+  --cds-alias-typography-heading-font-weight: 500;
+  --cds-alias-typography-headline-letter-spacing: -0.0125em;
+  --cds-alias-typography-headline-font-weight: 500;
+  --cds-alias-typography-title-letter-spacing: -0.00833333em;
+  --cds-alias-typography-title-font-weight: 500;
+  --cds-alias-typography-section-letter-spacing: -0.01em;
+  --cds-alias-typography-section-font-weight: 500;
+  --cds-alias-typography-subsection-letter-spacing: -0.0125em;
+  --cds-alias-typography-subsection-font-weight: 500;
+  --cds-alias-typography-message-letter-spacing: -0.0125em;
+  --cds-alias-typography-message-font-weight: calc(400 * (1rem / var(--cds-global-base)));
+  --cds-alias-typography-secondary-letter-spacing: -0.007692em;
+  --cds-alias-typography-secondary-font-weight: 400;
+  --cds-alias-typography-caption-letter-spacing: 0.018182em;
+  --cds-alias-typography-caption-font-weight: 400;
+  --cds-alias-typography-smallcaption-letter-spacing: 0.05em;
+  --cds-alias-typography-smallcaption-font-weight: 500;
+  --cds-alias-typography-info-hover: var(--cds-global-color-blue-800);
+  --cds-alias-typography-success-hover: var(--cds-global-color-green-800);
+  --cds-alias-typography-warning-hover: var(--cds-global-color-ochre-900);
+  --cds-alias-typography-danger-hover: var(--cds-global-color-red-800);
+  --cds-alias-typography-neutral-hover: var(--cds-global-color-construction-700);
+  --cds-alias-typography-disabled: var(--cds-global-color-construction-500);
+  --cds-alias-typography-disabled-button: var(--cds-global-color-construction-500);
+
+  &,
+  & [clr-density] {
+    --cds-alias-typography-body-font-size: #{density.$clr-base-typography-font-size-default};
+    --cds-alias-typography-body-line-height: #{density.$clr-base-typography-line-height-20};
+    --cds-alias-typography-display-font-size: #{density.$clr-base-typography-font-size-display};
+    --cds-alias-typography-display-line-height: #{density.$clr-base-typography-line-height-44};
+    --cds-alias-typography-heading-font-size: #{density.$clr-base-typography-font-size-heading};
+    --cds-alias-typography-heading-line-height: #{density.$clr-base-typography-line-height-32};
+    --cds-alias-typography-headline-font-size: #{density.$clr-base-typography-font-size-headline};
+    --cds-alias-typography-headline-line-height: #{density.$clr-base-typography-line-height-36};
+    --cds-alias-typography-title-font-size: #{density.$clr-base-typography-font-size-heading};
+    --cds-alias-typography-title-line-height: #{density.$clr-base-typography-line-height-32};
+    --cds-alias-typography-section-font-size: #{density.$clr-base-typography-font-size-section};
+    --cds-alias-typography-section-line-height: #{density.$clr-base-typography-line-height-24};
+    --cds-alias-typography-subsection-font-size: #{density.$clr-base-typography-font-size-sub-section};
+    --cds-alias-typography-subsection-line-height: #{density.$clr-base-typography-line-height-24};
+    --cds-alias-typography-message-font-size: #{density.$clr-base-typography-font-size-sub-section};
+    --cds-alias-typography-message-line-height: #{density.$clr-base-typography-line-height-24};
+    --cds-alias-typography-secondary-font-size: #{density.$clr-base-typography-font-size-inline};
+    --cds-alias-typography-secondary-line-height: #{density.$clr-base-typography-line-height-16};
+    --cds-alias-typography-caption-font-size: #{density.$clr-base-typography-font-size-caption};
+    --cds-alias-typography-caption-line-height: #{density.$clr-base-typography-line-height-16};
+    --cds-alias-typography-smallcaption-font-size: #{density.$clr-base-typography-font-size-caption-small};
+    --cds-alias-typography-smallcaption-line-height: #{density.$clr-base-typography-line-height-12};
+  }
+}