@hermes-ui/angular 0.1.4

package/styles/core/theme.dark.scss

@@ -0,0 +1,298 @@
+/*
+ * 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;
+
+[hermes-theme~='dark'] {
+  // primary
+  // Evergreen (jade-400), the Hermes default. Tint/shade/dark are derived from jade-400 the same
+  // way the theme builder derives them live: tint L25%, tint-dark L18%, shade L+7, dark L+20.
+  // The downstream typography/interaction hover-active tokens aren't redeclared here — they
+  // already reference these primary tokens via var() in _alias-typography.scss/_alias-interaction.scss.
+  --hermes-alias-primary-tint: hsl(160deg 69% 25%);
+  --hermes-alias-primary-tint-dark: hsl(160deg 69% 18%);
+  --hermes-alias-primary: #{tokens.$hermes-global-color-jade-400};
+  --hermes-alias-primary-shade: hsl(160deg 69% 60%);
+  --hermes-alias-primary-dark: hsl(160deg 69% 73%);
+
+  // typography
+  --hermes-alias-typography-color-100: #{tokens.$hermes-global-color-black};
+  --hermes-alias-typography-color-200: #{tokens.$hermes-global-color-construction-300};
+  --hermes-alias-typography-color-300: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-typography-color-400: #{tokens.$hermes-global-color-construction-100};
+  --hermes-alias-typography-color-450: #{tokens.$hermes-global-color-construction-50};
+  --hermes-alias-typography-color-500: #{tokens.$hermes-global-color-white};
+  --hermes-alias-typography-color-black: #{tokens.$hermes-global-color-black};
+  --hermes-alias-typography-disabled-button: #{tokens.$hermes-global-color-construction-900};
+  --hermes-alias-typography-disabled: #{tokens.$hermes-global-color-construction-500};
+  --hermes-alias-typography-info-hover: #{tokens.$hermes-global-color-blue-200};
+  --hermes-alias-typography-success-hover: #{tokens.$hermes-global-color-green-400};
+  --hermes-alias-typography-warning-hover: #{tokens.$hermes-global-color-yellow-600};
+  --hermes-alias-typography-danger-hover: #{tokens.$hermes-global-color-red-400};
+  --hermes-alias-typography-neutral-hover: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-typography-link-on-colorbg: #{tokens.$hermes-global-color-construction-1000};
+  --hermes-alias-typography-link-color: var(--hermes-alias-primary);
+  --hermes-alias-typography-link-color-hover: var(--hermes-alias-primary-dark);
+  --hermes-alias-typography-link-color-visited: #{tokens.$hermes-global-color-violet-300};
+  --hermes-alias-typography-link-color-visited-hover: #{tokens.$hermes-global-color-violet-200};
+  --hermes-alias-typography-link-color-active: #{tokens.$hermes-global-color-red-600};
+
+  // object
+  // A lean toward the active theme's primary color instead of flat gray — keeps the app
+  // background neutral/readable while still feeling themed. construction-1000 already carries
+  // its own baked-in blue lean (hsl(198deg 30% 15%), not a true neutral) at very low lightness,
+  // so this needs a much higher mix than the light-mode equivalent to actually read as tinted
+  // instead of getting drowned out by that residual blue + near-black lightness.
+  --hermes-alias-object-app-background: color-mix(
+    in oklch,
+    #{tokens.$hermes-global-color-construction-1000},
+    var(--hermes-alias-primary) 20%
+  );
+  --hermes-alias-object-container-backdrop-background: #{tokens.$hermes-alias-object-opacity-300};
+  --hermes-alias-object-container-background: #{tokens.$hermes-global-color-construction-900};
+  --hermes-alias-object-container-background-tint: #{tokens.$hermes-global-color-construction-1000};
+  --hermes-alias-object-container-background-shade: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-object-container-background-dark: #{tokens.$hermes-global-color-construction-1100};
+  --hermes-alias-object-container-background-inverse: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-object-container-background-inverse-tint: #{tokens.$hermes-global-color-construction-100};
+  --hermes-alias-object-container-background-inverse-shade: #{tokens.$hermes-global-color-construction-300};
+  --hermes-alias-object-container-border-color: #{tokens.$hermes-global-color-black};
+  --hermes-alias-object-overlay-background: #{tokens.$hermes-global-color-construction-900};
+  --hermes-alias-object-border-color: #{tokens.$hermes-global-color-construction-500};
+  --hermes-alias-object-border-color-tint: #{tokens.$hermes-global-color-construction-400};
+  --hermes-alias-object-border-color-shade: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-object-shadow-100: 0 #{tokens.$hermes-global-space-1} #{tokens.$hermes-global-space-2} 0
+    #{tokens.$hermes-alias-object-opacity-300};
+  --hermes-alias-object-shadow-200: 0 #{tokens.$hermes-global-space-1} #{tokens.$hermes-global-space-2} 0
+    #{tokens.$hermes-alias-object-opacity-200};
+  --hermes-alias-object-shadow-300: 0 #{tokens.$hermes-global-space-1} #{tokens.$hermes-global-space-2} 0
+    #{tokens.$hermes-alias-object-opacity-100};
+  --hermes-alias-object-interaction-color: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-object-interaction-color-hover: #{tokens.$hermes-global-color-construction-50};
+  --hermes-alias-object-interaction-color-active: #{tokens.$hermes-global-color-construction-100};
+  --hermes-alias-object-interaction-color-selected: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-object-interaction-color-disabled: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-object-interaction-background: #{tokens.$hermes-global-color-construction-1000};
+  --hermes-alias-object-interaction-background-hover: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-object-interaction-background-active: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-object-interaction-background-selected: #{tokens.$hermes-global-color-blue-900};
+  --hermes-alias-object-interaction-background-selected-active: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-object-interaction-background-selected-hover: #{tokens.$hermes-global-color-construction-700};
+  --hermes-alias-object-interaction-background-disabled: #{tokens.$hermes-global-color-construction-700};
+  // Sidenav background: a lean toward the active theme's primary color instead of flat gray —
+  // keeps it reading as neutral chrome while still feeling themed. Kept to a low mix percentage
+  // on purpose: --hermes-alias-primary defaults to jade-400, a very light color, so a higher mix
+  // (as used against the lighter construction-25 base in light mode) would raise this background's
+  // lightness above --hermes-alias-object-app-background instead of below it, erasing the contrast
+  // the sidenav needs against the app background.
+  --hermes-alias-object-interaction-background-shade: color-mix(
+    in oklch,
+    #{tokens.$hermes-global-color-construction-1100},
+    var(--hermes-alias-primary) 10%
+  );
+  --hermes-alias-object-interaction-background-shade-hover: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-object-interaction-background-shade-active: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-object-interaction-background-shade-selected: #{tokens.$hermes-global-color-construction-700};
+  --hermes-alias-object-interaction-background-shade-selected-hover: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-object-interaction-background-shade-selected-active: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-object-interaction-border-color: #{tokens.$hermes-global-color-construction-300};
+  --hermes-alias-object-interaction-info-hover: #{tokens.$hermes-global-color-blue-300};
+  --hermes-alias-object-interaction-info-active: #{tokens.$hermes-global-color-blue-500};
+  --hermes-alias-object-interaction-info-selected: #{tokens.$hermes-global-color-blue-500};
+  --hermes-alias-object-interaction-info-click: #{tokens.$hermes-global-color-blue-500}; // deprecated in favor of active. To be removed in next major release.
+  --hermes-alias-object-interaction-info-secondary-hover: #{tokens.$hermes-global-color-blue-1000};
+  --hermes-alias-object-interaction-success-hover: #{tokens.$hermes-global-color-green-400};
+  --hermes-alias-object-interaction-success-active: #{tokens.$hermes-global-color-green-600};
+  --hermes-alias-object-interaction-success-click: #{tokens.$hermes-global-color-green-600}; // deprecated in favor of active. To be removed in next major release.
+  --hermes-alias-object-interaction-success-secondary-hover: #{tokens.$hermes-global-color-green-1000};
+  --hermes-alias-object-interaction-warning-hover: #{tokens.$hermes-global-color-yellow-300};
+  --hermes-alias-object-interaction-warning-active: #{tokens.$hermes-global-color-yellow-500};
+  --hermes-alias-object-interaction-warning-click: #{tokens.$hermes-global-color-yellow-500}; // deprecated in favor of active. To be removed in next major release.
+  --hermes-alias-object-interaction-warning-secondary-hover: #{tokens.$hermes-global-color-yellow-1000};
+  --hermes-alias-object-interaction-danger-hover: #{tokens.$hermes-global-color-red-400};
+  --hermes-alias-object-interaction-danger-active: #{tokens.$hermes-global-color-red-600};
+  --hermes-alias-object-interaction-danger-click: #{tokens.$hermes-global-color-red-600}; // deprecated in favor of active. To be removed in next major release.
+  --hermes-alias-object-interaction-danger-secondary-hover: #{tokens.$hermes-global-color-red-1000};
+  --hermes-alias-object-interaction-neutral-hover: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-object-interaction-neutral-active: #{tokens.$hermes-global-color-construction-400};
+  --hermes-alias-object-interaction-neutral-click: #{tokens.$hermes-global-color-construction-400}; // deprecated in favor of active. To be removed in next major release.
+  --hermes-alias-object-interaction-neutral-secondary-hover: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-object-interaction-inverse-hover: #{tokens.$hermes-global-color-construction-700};
+  --hermes-alias-object-interaction-inverse-active: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-object-interaction-inverse-click: #{tokens.$hermes-global-color-construction-800}; // deprecated in favor of active. To be removed in next major release.
+
+  // skeleton loading gradient
+  --hermes-alias-object-skeleton-loading-gradient: linear-gradient(
+    90deg,
+    #{tokens.$hermes-alias-object-interaction-background} 0%,
+    #{tokens.$hermes-global-color-construction-500} 35%,
+    #{tokens.$hermes-global-color-construction-400} 65%,
+    #{tokens.$hermes-alias-object-interaction-background} 100%
+  );
+
+  // status
+  --hermes-alias-status-tint: transparent;
+  --hermes-alias-status-info: #{tokens.$hermes-global-color-blue-400};
+  --hermes-alias-status-info-tint: #{tokens.$hermes-global-color-blue-800};
+  --hermes-alias-status-info-shade: #{tokens.$hermes-global-color-blue-500};
+  --hermes-alias-status-info-dark: #{tokens.$hermes-global-color-blue-600};
+  --hermes-alias-status-success: #{tokens.$hermes-global-color-green-500};
+  --hermes-alias-status-success-tint: #{tokens.$hermes-global-color-green-800};
+  --hermes-alias-status-success-shade: #{tokens.$hermes-global-color-green-600};
+  --hermes-alias-status-success-dark: #{tokens.$hermes-global-color-green-600};
+  --hermes-alias-status-warning: #{tokens.$hermes-global-color-ochre-400};
+  --hermes-alias-status-warning-tint: #{tokens.$hermes-global-color-ochre-900};
+  --hermes-alias-status-warning-shade: #{tokens.$hermes-global-color-ochre-500};
+  --hermes-alias-status-warning-dark: #{tokens.$hermes-global-color-ochre-600};
+  --hermes-alias-status-danger: #{tokens.$hermes-global-color-red-500};
+  --hermes-alias-status-danger-tint: #{tokens.$hermes-global-color-red-900};
+  --hermes-alias-status-danger-shade: #{tokens.$hermes-global-color-red-600};
+  --hermes-alias-status-danger-dark: #{tokens.$hermes-global-color-red-900};
+  --hermes-alias-status-neutral: #{tokens.$hermes-global-color-construction-300};
+  --hermes-alias-status-neutral-tint: #{tokens.$hermes-global-color-construction-700};
+  --hermes-alias-status-neutral-shade: #{tokens.$hermes-global-color-construction-400};
+  --hermes-alias-status-disabled: #{tokens.$hermes-global-color-construction-600};
+  --hermes-alias-status-disabled-tint: #{tokens.$hermes-global-color-construction-700};
+  --hermes-alias-status-disabled-shade: #{tokens.$hermes-global-color-construction-500};
+
+  //utility
+  --hermes-alias-utility-gray: #{tokens.$hermes-global-color-construction-300};
+  --hermes-alias-utility-gray-tint: #{tokens.$hermes-global-color-construction-1000};
+  --hermes-alias-utility-gray-shade: #{tokens.$hermes-global-color-construction-200};
+  --hermes-alias-utility-blue: #{tokens.$hermes-global-color-blue-300};
+  --hermes-alias-utility-blue-tint: #{tokens.$hermes-global-color-blue-1000};
+  --hermes-alias-utility-blue-shade: #{tokens.$hermes-global-color-blue-200};
+  --hermes-alias-utility-light-blue: #{tokens.$hermes-global-color-blue-700};
+  --hermes-alias-utility-light-blue-tint: #{tokens.$hermes-global-color-blue-1000};
+  --hermes-alias-utility-light-blue-shade: #{tokens.$hermes-global-color-blue-500};
+  --hermes-alias-utility-dark-blue: #{tokens.$hermes-global-color-azure-200};
+  --hermes-alias-utility-dark-blue-tint: #{tokens.$hermes-global-color-azure-1000};
+  --hermes-alias-utility-dark-blue-shade: #{tokens.$hermes-global-color-azure-50};
+  --hermes-alias-utility-green: #{tokens.$hermes-global-color-green-400};
+  --hermes-alias-utility-green-tint: #{tokens.$hermes-global-color-green-1000};
+  --hermes-alias-utility-green-shade: #{tokens.$hermes-global-color-green-200};
+  --hermes-alias-utility-yellow: #{tokens.$hermes-global-color-ochre-400};
+  --hermes-alias-utility-yellow-tint: #{tokens.$hermes-global-color-ochre-900};
+  --hermes-alias-utility-yellow-shade: #{tokens.$hermes-global-color-ochre-300};
+  --hermes-alias-utility-red: #{tokens.$hermes-global-color-red-500};
+  --hermes-alias-utility-red-tint: #{tokens.$hermes-global-color-red-1000};
+  --hermes-alias-utility-red-shade: #{tokens.$hermes-global-color-red-200};
+  --hermes-alias-utility-tangerine: #{tokens.$hermes-global-color-tangerine-600};
+  --hermes-alias-utility-tangerine-tint: #{tokens.$hermes-global-color-tangerine-1000};
+  --hermes-alias-utility-tangerine-shade: #{tokens.$hermes-global-color-tangerine-400};
+  --hermes-alias-utility-violet: #{tokens.$hermes-global-color-violet-400};
+  --hermes-alias-utility-violet-tint: #{tokens.$hermes-global-color-violet-1000};
+  --hermes-alias-utility-violet-shade: #{tokens.$hermes-global-color-violet-200};
+
+  // viz
+  --hermes-alias-viz-border: #{tokens.$hermes-global-color-cool-gray-50};
+  --hermes-alias-viz-general-1: #{tokens.$hermes-global-color-blue-400};
+  --hermes-alias-viz-general-1-blue: #{tokens.$hermes-global-color-blue-400};
+  --hermes-alias-viz-general-2: #{tokens.$hermes-global-color-violet-500};
+  --hermes-alias-viz-general-2-violet: #{tokens.$hermes-global-color-violet-400};
+  --hermes-alias-viz-general-3: #{tokens.$hermes-global-color-aqua-200};
+  --hermes-alias-viz-general-3-aqua: #{tokens.$hermes-global-color-aqua-200};
+  --hermes-alias-viz-general-4: #{tokens.$hermes-global-color-lavender-400};
+  --hermes-alias-viz-general-4-lime: #{tokens.$hermes-global-color-lime-300};
+  --hermes-alias-viz-general-5: #{tokens.$hermes-global-color-pink-400};
+  --hermes-alias-viz-general-5-blue: #{tokens.$hermes-global-color-blue-200};
+  --hermes-alias-viz-general-6: #{tokens.$hermes-global-color-lime-400};
+  --hermes-alias-viz-general-6-aqua: #{tokens.$hermes-global-color-aqua-50};
+  --hermes-alias-viz-general-7: #{tokens.$hermes-global-color-lavender-300};
+  --hermes-alias-viz-general-7-violet: #{tokens.$hermes-global-color-violet-200};
+  --hermes-alias-viz-general-8: #{tokens.$hermes-global-color-aqua-400};
+  --hermes-alias-viz-general-8-lime: #{tokens.$hermes-global-color-lime-100};
+  --hermes-alias-viz-general-9: #{tokens.$hermes-global-color-lime-200};
+  --hermes-alias-viz-general-9-blue: #{tokens.$hermes-global-color-blue-300};
+  --hermes-alias-viz-general-10: #{tokens.$hermes-global-color-violet-300};
+  --hermes-alias-viz-general-10-lime: #{tokens.$hermes-global-color-lime-50};
+  --hermes-alias-viz-general-11: #{tokens.$hermes-global-color-jade-400};
+  --hermes-alias-viz-general-11-aqua: #{tokens.$hermes-global-color-aqua-400};
+  --hermes-alias-viz-general-12: #{tokens.$hermes-global-color-azure-100};
+  --hermes-alias-viz-general-12-violet: #{tokens.$hermes-global-color-violet-50};
+  --hermes-alias-viz-general-13: #{tokens.$hermes-global-color-violet-400};
+  --hermes-alias-viz-general-13-violet: #{tokens.$hermes-global-color-violet-300};
+  --hermes-alias-viz-general-14: #{tokens.$hermes-global-color-green-200};
+  --hermes-alias-viz-general-14-blue: #{tokens.$hermes-global-color-blue-50};
+  --hermes-alias-viz-general-15: #{tokens.$hermes-global-color-pink-300};
+  --hermes-alias-viz-general-15-aqua: #{tokens.$hermes-global-color-aqua-300};
+  --hermes-alias-viz-general-16: #{tokens.$hermes-global-color-azure-300};
+  --hermes-alias-viz-general-16-lime: #{tokens.$hermes-global-color-lime-200};
+  --hermes-alias-viz-severity-neutral: #{tokens.$hermes-global-color-construction-300};
+  --hermes-alias-viz-severity-success: #{tokens.$hermes-global-color-green-500};
+  --hermes-alias-viz-severity-warning: #{tokens.$hermes-global-color-yellow-300};
+  --hermes-alias-viz-severity-warning-light: #{tokens.$hermes-global-color-yellow-300};
+  --hermes-alias-viz-severity-immediate: #{tokens.$hermes-global-color-tangerine-400};
+  --hermes-alias-viz-severity-critical: #{tokens.$hermes-global-color-red-700};
+  --hermes-alias-viz-severity-free-space-fill: #{tokens.$hermes-global-color-construction-800};
+  --hermes-alias-viz-sequential-blue-50: #{tokens.$hermes-global-color-blue-1000};
+  --hermes-alias-viz-sequential-blue-100: #{tokens.$hermes-global-color-blue-900};
+  --hermes-alias-viz-sequential-blue-200: #{tokens.$hermes-global-color-blue-800};
+  --hermes-alias-viz-sequential-blue-300: #{tokens.$hermes-global-color-blue-700};
+  --hermes-alias-viz-sequential-blue-400: #{tokens.$hermes-global-color-blue-600};
+  --hermes-alias-viz-sequential-blue-500: #{tokens.$hermes-global-color-blue-500};
+  --hermes-alias-viz-sequential-blue-600: #{tokens.$hermes-global-color-blue-400};
+  --hermes-alias-viz-sequential-blue-700: #{tokens.$hermes-global-color-blue-300};
+  --hermes-alias-viz-sequential-blue-800: #{tokens.$hermes-global-color-blue-200};
+  --hermes-alias-viz-sequential-blue-900: #{tokens.$hermes-global-color-blue-100};
+  --hermes-alias-viz-sequential-blue-1000: #{tokens.$hermes-global-color-blue-50};
+  --hermes-alias-viz-sequential-violet-50: #{tokens.$hermes-global-color-violet-1000};
+  --hermes-alias-viz-sequential-violet-100: #{tokens.$hermes-global-color-violet-900};
+  --hermes-alias-viz-sequential-violet-200: #{tokens.$hermes-global-color-violet-800};
+  --hermes-alias-viz-sequential-violet-300: #{tokens.$hermes-global-color-violet-700};
+  --hermes-alias-viz-sequential-violet-400: #{tokens.$hermes-global-color-violet-600};
+  --hermes-alias-viz-sequential-violet-500: #{tokens.$hermes-global-color-violet-500};
+  --hermes-alias-viz-sequential-violet-600: #{tokens.$hermes-global-color-violet-400};
+  --hermes-alias-viz-sequential-violet-700: #{tokens.$hermes-global-color-violet-300};
+  --hermes-alias-viz-sequential-violet-800: #{tokens.$hermes-global-color-violet-200};
+  --hermes-alias-viz-sequential-violet-900: #{tokens.$hermes-global-color-violet-100};
+  --hermes-alias-viz-sequential-violet-1000: #{tokens.$hermes-global-color-violet-50};
+  --hermes-alias-viz-sequential-ochre-50: #{tokens.$hermes-global-color-ochre-1000};
+  --hermes-alias-viz-sequential-ochre-100: #{tokens.$hermes-global-color-ochre-900};
+  --hermes-alias-viz-sequential-ochre-200: #{tokens.$hermes-global-color-ochre-800};
+  --hermes-alias-viz-sequential-ochre-300: #{tokens.$hermes-global-color-ochre-700};
+  --hermes-alias-viz-sequential-ochre-400: #{tokens.$hermes-global-color-ochre-600};
+  --hermes-alias-viz-sequential-ochre-500: #{tokens.$hermes-global-color-ochre-500};
+  --hermes-alias-viz-sequential-ochre-600: #{tokens.$hermes-global-color-ochre-400};
+  --hermes-alias-viz-sequential-ochre-700: #{tokens.$hermes-global-color-ochre-300};
+  --hermes-alias-viz-sequential-ochre-800: #{tokens.$hermes-global-color-ochre-200};
+  --hermes-alias-viz-sequential-ochre-900: #{tokens.$hermes-global-color-ochre-100};
+  --hermes-alias-viz-sequential-ochre-1000: #{tokens.$hermes-global-color-ochre-50};
+  --hermes-alias-viz-sequential-aqua-50: #{tokens.$hermes-global-color-aqua-1000};
+  --hermes-alias-viz-sequential-aqua-100: #{tokens.$hermes-global-color-aqua-900};
+  --hermes-alias-viz-sequential-aqua-200: #{tokens.$hermes-global-color-aqua-800};
+  --hermes-alias-viz-sequential-aqua-300: #{tokens.$hermes-global-color-aqua-700};
+  --hermes-alias-viz-sequential-aqua-400: #{tokens.$hermes-global-color-aqua-600};
+  --hermes-alias-viz-sequential-aqua-500: #{tokens.$hermes-global-color-aqua-500};
+  --hermes-alias-viz-sequential-aqua-600: #{tokens.$hermes-global-color-aqua-400};
+  --hermes-alias-viz-sequential-aqua-700: #{tokens.$hermes-global-color-aqua-300};
+  --hermes-alias-viz-sequential-aqua-800: #{tokens.$hermes-global-color-aqua-200};
+  --hermes-alias-viz-sequential-aqua-900: #{tokens.$hermes-global-color-aqua-100};
+  --hermes-alias-viz-sequential-aqua-1000: #{tokens.$hermes-global-color-aqua-50};
+  --hermes-alias-viz-sequential-green-50: #{tokens.$hermes-global-color-green-1000};
+  --hermes-alias-viz-sequential-green-100: #{tokens.$hermes-global-color-green-900};
+  --hermes-alias-viz-sequential-green-200: #{tokens.$hermes-global-color-green-800};
+  --hermes-alias-viz-sequential-green-300: #{tokens.$hermes-global-color-green-700};
+  --hermes-alias-viz-sequential-green-400: #{tokens.$hermes-global-color-green-600};
+  --hermes-alias-viz-sequential-green-500: #{tokens.$hermes-global-color-green-500};
+  --hermes-alias-viz-sequential-green-600: #{tokens.$hermes-global-color-green-400};
+  --hermes-alias-viz-sequential-green-700: #{tokens.$hermes-global-color-green-300};
+  --hermes-alias-viz-sequential-green-800: #{tokens.$hermes-global-color-green-200};
+  --hermes-alias-viz-sequential-green-900: #{tokens.$hermes-global-color-green-100};
+  --hermes-alias-viz-sequential-green-1000: #{tokens.$hermes-global-color-green-50};
+  --hermes-alias-viz-sequential-red-50: #{tokens.$hermes-global-color-red-1000};
+  --hermes-alias-viz-sequential-red-100: #{tokens.$hermes-global-color-red-900};
+  --hermes-alias-viz-sequential-red-200: #{tokens.$hermes-global-color-red-800};
+  --hermes-alias-viz-sequential-red-300: #{tokens.$hermes-global-color-red-700};
+  --hermes-alias-viz-sequential-red-400: #{tokens.$hermes-global-color-red-600};
+  --hermes-alias-viz-sequential-red-500: #{tokens.$hermes-global-color-red-500};
+  --hermes-alias-viz-sequential-red-600: #{tokens.$hermes-global-color-red-400};
+  --hermes-alias-viz-sequential-red-700: #{tokens.$hermes-global-color-red-300};
+  --hermes-alias-viz-sequential-red-800: #{tokens.$hermes-global-color-red-200};
+  --hermes-alias-viz-sequential-red-900: #{tokens.$hermes-global-color-red-100};
+  --hermes-alias-viz-sequential-red-1000: #{tokens.$hermes-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';
+
+[hermes-theme~='high-contrast'] {
+  --hermes-alias-typography-color-500: CanvasText;
+  --hermes-alias-typography-color-400: CanvasText;
+  --hermes-alias-typography-color-300: CanvasText;
+  --hermes-alias-typography-link-color: LinkText;
+  --hermes-alias-typography-link-color-hover: ActiveText;
+  --hermes-alias-typography-link-color-visited: VisitedText;
+  --hermes-alias-typography-link-color-visited-hover: VisitedText;
+  --hermes-alias-status-info: CanvasText;
+  --hermes-alias-status-success: CanvasText;
+  --hermes-alias-status-warning: CanvasText;
+  --hermes-alias-status-danger: CanvasText;
+  --hermes-alias-status-neutral: GrayText;
+  --hermes-alias-status-neutral-tint: GrayText;
+  --hermes-alias-status-neutral-shade: GrayText;
+  --hermes-alias-object-border-color: CanvasText;
+  --hermes-alias-object-border-color-tint: CanvasText;
+  --hermes-alias-object-border-color-shade: CanvasText;
+  --hermes-alias-object-container-border-color: CanvasText;
+  --hermes-alias-object-app-background: Canvas;
+  --hermes-alias-object-interaction-color: ButtonText;
+  --hermes-alias-object-interaction-color-hover: HighlightText;
+  --hermes-alias-object-interaction-color-active: ActiveText;
+  --hermes-alias-object-interaction-color-selected: SelectedItemText;
+  --hermes-alias-object-interaction-color-disabled: GrayText;
+  --hermes-alias-object-interaction-border-color: CanvasText;
+  --hermes-alias-object-interaction-background: ButtonFace;
+  --hermes-alias-object-interaction-background-hover: Highlight;
+  --hermes-alias-object-interaction-background-active: Highlight;
+  --hermes-alias-object-interaction-background-selected: SelectedItem;
+  --hermes-alias-object-interaction-background-disabled: Canvas;
+  --hermes-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';
+
+[hermes-theme~='low-motion'] {
+  --hermes-global-animation-duration-instant: 0;
+  --hermes-global-animation-duration-quickest: 0;
+  --hermes-global-animation-duration-quicker: 0;
+  --hermes-global-animation-duration-quick: 0;
+  --hermes-global-animation-duration-secondary: 0;
+  --hermes-global-animation-duration-primary: 0;
+  --hermes-global-animation-duration-slow: 2s;
+  --hermes-global-animation-duration-slower: 2s;
+  --hermes-global-animation-duration-slowest: 2s;
+}

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

@@ -0,0 +1,74 @@
+/*
+ * 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() {
+  &,
+  & [hermes-theme] {
+    --hermes-alias-object-interaction-background-highlight: var(--hermes-alias-primary);
+    --hermes-alias-object-interaction-background-selected: var(--hermes-alias-primary-tint-dark);
+    --hermes-alias-object-interaction-background-shade-active: var(--hermes-alias-primary-tint-dark);
+    --hermes-alias-object-interaction-primary-hover: var(--hermes-alias-primary-shade);
+    --hermes-alias-object-interaction-primary-secondary-hover: var(--hermes-alias-primary-tint);
+    --hermes-alias-object-interaction-primary-active: var(--hermes-alias-primary-dark);
+    // Sidenav background: a faint lean toward the active theme's primary color instead of flat
+    // gray — keeps it reading as neutral chrome while still feeling themed. Declared here (not
+    // in the flat section below) so it re-reads --hermes-alias-primary from whatever element a
+    // theme preset overrides it on (e.g. document.body), instead of freezing to :root's value.
+    --hermes-alias-object-interaction-background-shade: color-mix(
+      in oklch,
+      var(--hermes-global-color-cool-gray-50),
+      var(--hermes-alias-primary) 8%
+    );
+    --hermes-alias-object-interaction-info-hover: var(--hermes-global-color-blue-800);
+    --hermes-alias-object-interaction-info-click: var(--hermes-global-color-blue-900);
+    --hermes-alias-object-interaction-info-active: var(--hermes-global-color-blue-900);
+    --hermes-alias-object-interaction-info-selected: var(--hermes-global-color-blue-900);
+    --hermes-alias-object-interaction-info-secondary-hover: var(--hermes-global-color-blue-50);
+    --hermes-alias-object-interaction-success-hover: var(--hermes-global-color-green-800);
+    --hermes-alias-object-interaction-success-click: var(--hermes-global-color-green-900);
+    --hermes-alias-object-interaction-success-active: var(--hermes-global-color-green-900);
+    --hermes-alias-object-interaction-success-secondary-hover: var(--hermes-global-color-green-50);
+    --hermes-alias-object-interaction-warning-hover: var(--hermes-global-color-ochre-600);
+    --hermes-alias-object-interaction-warning-click: var(--hermes-global-color-ochre-700);
+    --hermes-alias-object-interaction-warning-active: var(--hermes-global-color-ochre-700);
+    --hermes-alias-object-interaction-warning-secondary-hover: var(--hermes-global-color-ochre-50);
+    --hermes-alias-object-interaction-danger-hover: var(--hermes-global-color-red-800);
+    --hermes-alias-object-interaction-danger-click: var(--hermes-global-color-red-900);
+    --hermes-alias-object-interaction-danger-active: var(--hermes-global-color-red-900);
+    --hermes-alias-object-interaction-danger-secondary-hover: var(--hermes-global-color-red-50);
+  }
+
+  --hermes-alias-object-interaction-outline: Highlight auto 2px;
+  --hermes-alias-object-interaction-outline-webkit: 5px auto -webkit-focus-ring-color;
+  --hermes-alias-object-interaction-outline-offset: 1px;
+  --hermes-alias-object-interaction-touch-target: calc(36 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-interaction-border-color: var(--hermes-global-color-construction-500);
+  --hermes-alias-object-interaction-background: var(--hermes-global-color-white);
+  --hermes-alias-object-interaction-background-hover: var(--hermes-global-color-construction-50);
+  --hermes-alias-object-interaction-background-active: var(--hermes-global-color-construction-100);
+  --hermes-alias-object-interaction-background-selected-hover: var(--hermes-global-color-construction-100);
+  --hermes-alias-object-interaction-background-selected-active: var(--hermes-global-color-construction-200);
+  --hermes-alias-object-interaction-background-disabled: var(--hermes-global-color-white);
+  --hermes-alias-object-interaction-background-shade-hover: var(--hermes-global-color-construction-100);
+  --hermes-alias-object-interaction-background-shade-selected: var(--hermes-global-color-white);
+  --hermes-alias-object-interaction-background-shade-selected-hover: var(--hermes-global-color-construction-100);
+  --hermes-alias-object-interaction-background-shade-selected-active: var(--hermes-global-color-construction-200);
+  --hermes-alias-object-interaction-color: var(--hermes-global-color-construction-700);
+  --hermes-alias-object-interaction-color-hover: var(--hermes-global-color-construction-1000);
+  --hermes-alias-object-interaction-color-active: var(--hermes-global-color-construction-1000);
+  --hermes-alias-object-interaction-color-selected: var(--hermes-global-color-construction-700);
+  --hermes-alias-object-interaction-color-disabled: var(--hermes-global-color-construction-300);
+  --hermes-alias-object-interaction-neutral-hover: var(--hermes-global-color-construction-700);
+  --hermes-alias-object-interaction-neutral-click: var(--hermes-global-color-construction-800);
+  --hermes-alias-object-interaction-neutral-active: var(--hermes-global-color-construction-800);
+  --hermes-alias-object-interaction-neutral-secondary-hover: var(--hermes-global-color-construction-50);
+  --hermes-alias-object-interaction-inverse-hover: var(--hermes-global-color-construction-600);
+  --hermes-alias-object-interaction-inverse-click: var(--hermes-global-color-construction-800);
+  --hermes-alias-object-interaction-inverse-active: var(--hermes-global-color-construction-800);
+}

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../mixins';
+
+@include mixins.root-or-host() {
+  --hermes-alias-object-overlay-background: var(--hermes-global-color-white);
+  // shadcn-style backdrop: a lighter scrim (was 60%) plus a blur, instead of relying on
+  // darkness alone to separate the overlay (modal, side panel, mobile nav) from the page
+  --hermes-alias-object-overlay-backdrop-background: hsl(0deg 0% 0% / 30%);
+  --hermes-alias-object-overlay-backdrop-blur: 4px;
+
+  &,
+  & [hermes-theme] {
+    // A faint lean toward the active theme's primary color instead of flat gray — keeps the app
+    // background neutral/readable while still feeling themed. Re-declared on [hermes-theme] (not
+    // just :root) so it re-reads --hermes-alias-primary from whatever element a theme preset
+    // overrides it on (e.g. document.body), instead of freezing to the value inherited from :root.
+    --hermes-alias-object-app-background: color-mix(
+      in oklch,
+      var(--hermes-global-color-construction-25),
+      var(--hermes-alias-primary) 4%
+    );
+  }
+}

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() {
+  --hermes-alias-object-border-radius-100: calc(4 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-border-radius-200: calc(12 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-border-radius-300: 50%;
+  --hermes-alias-object-border-width-100: calc(1 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-border-width-200: calc(2 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-border-width-300: calc(3 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-border-width-400: calc(4 * (1rem / var(--hermes-global-base)));
+  --hermes-alias-object-border-color: var(--hermes-global-color-construction-200);
+  --hermes-alias-object-border-color-tint: var(--hermes-global-color-construction-100);
+  --hermes-alias-object-border-color-shade: var(--hermes-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() {
+  --hermes-alias-object-container-background: var(--hermes-global-color-white);
+  --hermes-alias-object-container-background-tint: var(--hermes-global-color-construction-50);
+  --hermes-alias-object-container-background-shade: var(--hermes-global-color-construction-100);
+  --hermes-alias-object-container-background-dark: var(--hermes-global-color-cool-gray-50);
+  --hermes-alias-object-container-background-inverse: var(--hermes-global-color-construction-600);
+  --hermes-alias-object-container-background-inverse-tint: var(--hermes-global-color-construction-800);
+  --hermes-alias-object-container-background-inverse-shade: var(--hermes-global-color-construction-500);
+  --hermes-alias-object-container-backdrop-background: hsl(0deg 0% 100% / 60%);
+  --hermes-alias-object-container-border-color: var(--hermes-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() {
+  --hermes-alias-object-opacity-0: hsl(0deg 0% 0% / 0%);
+  --hermes-alias-object-opacity-100: hsl(0deg 0% 0% / 20%);
+  --hermes-alias-object-opacity-200: hsl(0deg 0% 0% / 40%);
+  --hermes-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() {
+  --hermes-alias-object-shadow-100: 0 calc((1 / var(--hermes-global-base, 20)) * 1rem)
+    calc((3 / var(--hermes-global-base, 20)) * 1rem) 0 hsl(198deg 30% 15% / 50%);
+  --hermes-alias-object-shadow-200: 0 calc((1 / var(--hermes-global-base, 20)) * 1rem)
+    calc((3 / var(--hermes-global-base, 20)) * 1rem) 0 hsl(198deg 30% 15% / 30%);
+  --hermes-alias-object-shadow-300: 0 calc((1 / var(--hermes-global-base, 20)) * 1rem)
+    calc((3 / var(--hermes-global-base, 20)) * 1rem) 0 hsl(198deg 30% 15% / 20%);
+}

package/styles/core/tokens/_alias-primary.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() {
+  &,
+  & [hermes-theme] {
+    // Evergreen (jade-600), the Hermes default. Tint/shade/dark are derived from jade-600 the
+    // same way the theme builder derives them live: tint L94%, tint-dark L95%, shade L-7, dark L-10.
+    --hermes-alias-primary-tint: hsl(160deg 69% 94%);
+    --hermes-alias-primary-tint-dark: hsl(160deg 69% 95%);
+    --hermes-alias-primary: var(--hermes-global-color-jade-600);
+    --hermes-alias-primary-shade: hsl(160deg 69% 29%);
+    --hermes-alias-primary-dark: hsl(160deg 69% 26%);
+  }
+}

package/styles/core/tokens/_alias-status.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 '../../mixins';
+
+@include mixins.root-or-host() {
+  &,
+  & [hermes-theme] {
+    --hermes-alias-status-info: var(--hermes-global-color-blue-700);
+    --hermes-alias-status-info-tint: var(--hermes-global-color-blue-50);
+    --hermes-alias-status-info-shade: var(--hermes-global-color-blue-800);
+    --hermes-alias-status-info-dark: var(--hermes-global-color-blue-900);
+    --hermes-alias-status-success: var(--hermes-global-color-green-700);
+    --hermes-alias-status-success-tint: var(--hermes-global-color-green-50);
+    --hermes-alias-status-success-shade: var(--hermes-global-color-green-800);
+    --hermes-alias-status-success-dark: var(--hermes-global-color-green-900);
+    --hermes-alias-status-warning: var(--hermes-global-color-ochre-500);
+    --hermes-alias-status-warning-tint: var(--hermes-global-color-ochre-100);
+    --hermes-alias-status-warning-shade: var(--hermes-global-color-ochre-600);
+    --hermes-alias-status-warning-dark: var(--hermes-global-color-ochre-800);
+    --hermes-alias-status-danger: var(--hermes-global-color-red-700);
+    --hermes-alias-status-danger-tint: var(--hermes-global-color-red-50);
+    --hermes-alias-status-danger-shade: var(--hermes-global-color-red-800);
+    --hermes-alias-status-danger-dark: var(--hermes-global-color-red-900);
+  }
+
+  --hermes-alias-status-neutral: var(--hermes-global-color-construction-600);
+  --hermes-alias-status-neutral-tint: var(--hermes-global-color-construction-50);
+  --hermes-alias-status-neutral-shade: var(--hermes-global-color-construction-700);
+  --hermes-alias-status-disabled: var(--hermes-global-color-construction-300);
+  --hermes-alias-status-disabled-tint: var(--hermes-global-color-construction-200);
+  --hermes-alias-status-disabled-shade: var(--hermes-global-color-construction-400);
+  --hermes-alias-status-alt: var(--hermes-global-color-violet-700);
+  --hermes-alias-status-alt-tint: var(--hermes-global-color-violet-600);
+  --hermes-alias-status-alt-shade: var(--hermes-global-color-violet-900);
+}