@clr/ui/shim.cds-core.css

CSS for Clarity

/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/* This shim file maps the custom properties of @clr/ui to Core tokens. Thus, it is only needed for apps currently dependent on @clr/ui and wanting to apply Core look and feel. */
[cds-theme] {
  /* Global */
  --clr-global-app-background: var(--cds-alias-object-app-background);
  --clr-global-selection-color: var(--cds-alias-object-interaction-background-selected);
  --clr-global-on-selection-color: var(--cds-alias-object-interaction-color-selected);
  --clr-global-hover-color: var(--cds-global-typography-link-color-hover);
  --clr-global-content-header-font-color: var(--cds-global-typography-color-400);
  --clr-global-font-color: var(--cds-global-typography-color-500);
  --clr-global-success-color: var(--cds-alias-status-success);
  --clr-global-error-color: var(--cds-alias-status-danger);
  --clr-close-color--normal: var(--cds-alias-object-interaction-color);
  --clr-close-color--hover: var(--cds-alias-object-interaction-color-hover);
  /* Typography */
  --clr-h1-color: var(--cds-global-typography-color-400);
  --clr-h2-color: var(--cds-global-typography-color-400);
  --clr-h3-color: var(--cds-global-typography-color-400);
  --clr-h4-color: var(--cds-global-typography-color-400);
  --clr-h5-color: var(--cds-global-typography-color-400);
  --clr-h6-color: var(--cds-global-typography-color-400);
  --clr-p0-color: var(--cds-global-typography-color-500);
  --clr-p1-color: var(--cds-global-typography-color-500);
  --clr-p2-color: var(--cds-global-typography-color-500);
  --clr-p3-color: var(--cds-global-typography-color-500);
  --clr-p4-color: var(--cds-global-typography-color-500);
  --clr-p5-color: var(--cds-global-typography-color-500);
  --clr-p6-color: var(--cds-global-typography-color-500);
  --clr-p7-color: var(--cds-global-typography-color-500);
  --clr-p8-color: var(--cds-global-typography-color-500);
  /* Buttons */
  --clr-btn-outline-bg-color: transparent;
  --clr-btn-default-color: var(--cds-alias-status-info);
  --clr-btn-default-border-color: var(--clr-btn-default-color);
  --clr-btn-default-bg-color: var(--clr-btn-outline-bg-color);
  --clr-btn-default-hover-bg-color: hsla(198, 100%, 34%, 0.1);
  --clr-btn-default-hover-color: var(--cds-alias-status-info);
  --clr-btn-default-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-default-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-default-disabled-bg-color: var(--clr-btn-default-bg-color);
  --clr-btn-default-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-default-checked-color: var(--cds-global-typography-color-100);
  --clr-btn-default-checked-bg-color: var(--clr-btn-default-color);
  --clr-btn-default-outline-color: var(--cds-alias-status-info);
  --clr-btn-default-outline-border-color: var(--clr-btn-default-outline-color);
  --clr-btn-default-outline-bg-color: var(--clr-btn-outline-bg-color);
  --clr-btn-default-outline-hover-bg-color: hsla(198, 100%, 34%, 0.1);
  --clr-btn-default-outline-hover-color: var(--cds-alias-status-info);
  --clr-btn-default-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-default-outline-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-default-outline-disabled-bg-color: var(--clr-btn-default-outline-bg-color);
  --clr-btn-default-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-default-outline-checked-color: var(--cds-global-typography-color-100);
  --clr-btn-default-outline-checked-bg-color: var(--clr-btn-default-outline-bg-color);
  --clr-btn-primary-color: var(--cds-global-typography-color-100);
  --clr-btn-primary-bg-color: var(--cds-alias-status-info);
  --clr-btn-primary-border-color: var(--cds-alias-status-info);
  --clr-btn-primary-hover-bg-color: var(--cds-alias-status-info);
  --clr-btn-primary-hover-color: var(--cds-global-typography-color-100);
  --clr-btn-primary-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-primary-disabled-color: var(--cds-global-typography-color-100);
  --clr-btn-primary-disabled-bg-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-primary-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-primary-checked-bg-color: var(--cds-alias-status-info);
  --clr-btn-primary-checked-color: var(--cds-global-typography-color-100);
  --clr-btn-success-color: var(--cds-global-typography-color-100);
  --clr-btn-success-bg-color: var(--cds-alias-status-success);
  --clr-btn-success-border-color: var(--clr-btn-success-bg-color);
  --clr-btn-success-hover-bg-color: var(--cds-alias-status-success);
  --clr-btn-success-hover-color: var(--clr-btn-success-color);
  --clr-btn-success-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-success-disabled-color: var(--cds-global-typography-color-100);
  --clr-btn-success-disabled-bg-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-success-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-success-checked-bg-color: var(--clr-btn-success-bg-color);
  --clr-btn-success-checked-color: var(--clr-btn-success-color);
  --clr-btn-success-outline-color: var(--cds-alias-status-success);
  --clr-btn-success-outline-bg-color: var(--clr-btn-outline-bg-color);
  --clr-btn-success-outline-border-color: var(--cds-alias-status-success);
  --clr-btn-success-outline-hover-bg-color: hsla(93, 80%, 28%, 0.1);
  --clr-btn-success-outline-hover-color: var(--cds-alias-status-success);
  --clr-btn-success-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-success-outline-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-success-outline-disabled-bg-color: var(--clr-btn-success-outline-bg-color);
  --clr-btn-success-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-success-outline-checked-bg-color: var(--clr-btn-success-outline-bg-color);
  --clr-btn-success-outline-checked-color: var(--clr-btn-success-outline-color);
  --clr-btn-danger-color: var(--cds-global-typography-color-100);
  --clr-btn-danger-bg-color: var(--cds-alias-status-danger);
  --clr-btn-danger-border-color: var(--clr-btn-danger-bg-color);
  --clr-btn-danger-hover-bg-color: var(--cds-alias-status-danger);
  --clr-btn-danger-hover-color: var(--clr-btn-danger-color);
  --clr-btn-danger-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-danger-disabled-color: var(--cds-global-typography-color-100);
  --clr-btn-danger-disabled-bg-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-danger-disabled-border-color: var(--clr-btn-danger-disabled-color);
  --clr-btn-danger-checked-bg-color: var(--clr-btn-danger-bg-color);
  --clr-btn-danger-checked-color: var(--clr-btn-danger-color);
  --clr-btn-danger-outline-color: var(--cds-alias-status-danger);
  --clr-btn-danger-outline-bg-color: var(--clr-btn-outline-bg-color);
  --clr-btn-danger-outline-border-color: var(--cds-alias-status-danger);
  --clr-btn-danger-outline-hover-bg-color: hsla(9, 100%, 44%, 0.1);
  --clr-btn-danger-outline-hover-color: var(--cds-alias-status-danger);
  --clr-btn-danger-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-danger-outline-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-danger-outline-disabled-bg-color: var(--clr-btn-danger-outline-bg-color);
  --clr-btn-danger-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-danger-outline-checked-bg-color: var(--clr-btn-danger-outline-bg-color);
  --clr-btn-danger-outline-checked-color: var(--clr-btn-danger-outline-color);
  --clr-btn-warning-color: var(--cds-global-color-construction-900);
  --clr-btn-warning-bg-color: var(--cds-alias-status-warning);
  --clr-btn-warning-border-color: var(--clr-btn-warning-bg-color);
  --clr-btn-warning-hover-bg-color: var(--cds-alias-status-warning);
  --clr-btn-warning-hover-color: var(--clr-btn-warning-color);
  --clr-btn-warning-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-warning-disabled-color: var(--cds-global-typography-color-100);
  --clr-btn-warning-disabled-bg-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-warning-disabled-border-color: var(--clr-btn-warning-disabled-color);
  --clr-btn-warning-checked-bg-color: var(--clr-btn-warning-bg-color);
  --clr-btn-warning-checked-color: var(--clr-btn-warning-color);
  --clr-btn-warning-outline-color: var(--cds-alias-status-warning-dark);
  --clr-btn-warning-outline-bg-color: var(--clr-btn-outline-bg-color);
  --clr-btn-warning-outline-border-color: var(--cds-alias-status-warning-dark);
  --clr-btn-warning-outline-hover-bg-color: hsla(40, 100%, 59%, 0.1);
  --clr-btn-warning-outline-hover-color: var(--cds-alias-status-warning-dark);
  --clr-btn-warning-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
  --clr-btn-warning-outline-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-warning-outline-disabled-bg-color: var(--clr-btn-warning-outline-bg-color);
  --clr-btn-warning-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-warning-outline-checked-bg-color: var(--clr-btn-warning-outline-bg-color);
  --clr-btn-warning-outline-checked-color: var(--clr-btn-warning-outline-color);
  --clr-btn-link-color: var(--cds-alias-status-info);
  --clr-btn-link-bg-color: transparent;
  --clr-btn-link-border-color: transparent;
  --clr-btn-link-hover-bg-color: transparent;
  --clr-btn-link-hover-color: var(--cds-alias-status-info);
  --clr-btn-link-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-link-disabled-bg-color: transparent;
  --clr-btn-link-disabled-border-color: transparent;
  --clr-btn-link-checked-bg-color: transparent;
  --clr-btn-link-checked-color: var(--cds-global-color-blue-800);
  --clr-btn-inverse-color: var(--cds-global-typography-color-100);
  --clr-btn-inverse-border-color: var(--cds-global-typography-color-100);
  --clr-btn-inverse-bg-color: transparent;
  --clr-btn-inverse-hover-bg-color: rgba(255, 255, 255, 0.15);
  --clr-btn-inverse-hover-color: var(--cds-global-typography-color-100);
  --clr-btn-inverse-box-shadow-color: rgba(0, 0, 0, 0.25);
  --clr-btn-inverse-disabled-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-inverse-disabled-bg-color: var(--clr-btn-inverse-bg-color);
  --clr-btn-inverse-disabled-border-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-inverse-checked-bg-color: rgba(255, 255, 255, 0.15);
  --clr-btn-inverse-checked-color: var(--cds-alias-status-disabled-tint);
  --clr-btn-icon-disabled-color: var(--cds-alias-status-disabled-tint);
  /* Alert Color Properties */
  --clr-alert-action-color: var(--cds-global-typography-color-500);
  --clr-alert-action-active-color: var(--cds-alias-object-interaction-color-active);
  --clr-alert-close-icon-color: var(--clr-alert-action-color);
  --clr-alert-close-icon-hover-color: var(--clr-alert-action-active-color);
  --clr-app-level-alert-color: var(--cds-global-color-white);
  --clr-app-alert-close-icon-color: var(--clr-app-level-alert-color);
  --clr-alert-info-bg-color: var(--cds-alias-status-info-tint);
  --clr-alert-info-font-color: var(--cds-global-typography-color-400);
  --clr-alert-info-border-color: var(--cds-alias-status-info);
  --clr-alert-info-icon-color: var(--clr-alert-info-font-color);
  --clr-alert-info-close-icon-color: var(--clr-alert-info-font-color);
  --clr-alert-info-action-color: var(--clr-alert-info-font-color);
  --clr-alert-success-bg-color: var(--cds-alias-status-success-tint);
  --clr-alert-success-font-color: var(--cds-global-typography-color-400);
  --clr-alert-success-border-color: var(--cds-alias-status-success);
  --clr-alert-success-icon-color: var(--clr-alert-success-font-color);
  --clr-alert-success-close-icon-color: var(--clr-alert-success-font-color);
  --clr-alert-success-action-color: var(--clr-alert-success-font-color);
  --clr-alert-warning-bg-color: var(--cds-alias-status-warning-tint);
  --clr-alert-warning-font-color: var(--cds-global-color-construction-900);
  --clr-alert-warning-border-color: var(--cds-alias-status-warning);
  --clr-alert-warning-icon-color: var(--clr-alert-warning-font-color);
  --clr-alert-warning-close-icon-color: var(--clr-alert-warning-font-color);
  --clr-alert-warning-action-color: var(--clr-alert-warning-font-color);
  --clr-alert-danger-bg-color: var(--cds-alias-status-danger-tint);
  --clr-alert-danger-font-color: var(--cds-global-typography-color-400);
  --clr-alert-danger-border-color: var(--cds-alias-status-danger);
  --clr-alert-danger-icon-color: var(--clr-alert-danger-font-color);
  --clr-alert-danger-close-icon-color: var(--clr-alert-danger-font-color);
  --clr-alert-danger-action-color: var(--clr-alert-danger-font-color);
  --clr-app-alert-info-bg-color: var(--cds-alias-status-info);
  --clr-app-alert-info-font-color: var(--cds-global-typography-color-100);
  --clr-app-alert-info-icon-color: var(--clr-app-alert-info-font-color);
  --clr-app-alert-info-action-color: var(--clr-app-alert-info-font-color);
  --clr-app-alert-info-action-active-color: var(--clr-app-alert-info-font-color);
  --clr-app-alert-info-close-icon-color: var(--clr-app-alert-info-font-color);
  --clr-app-alert-info-close-icon-hover-color: var(--clr-app-alert-info-font-color);
  --clr-app-alert-warning-bg-color: var(--cds-alias-status-warning);
  --clr-app-alert-warning-font-color: var(--cds-global-typography-color-500);
  --clr-app-alert-warning-icon-color: var(--clr-app-alert-warning-font-color);
  --clr-app-alert-warning-close-icon-color: var(--clr-app-alert-warning-font-color);
  --clr-app-alert-warning-action-color: var(--clr-app-alert-warning-font-color);
  --clr-app-alert-warning-action-active-color: var(--clr-app-alert-warning-font-color);
  --clr-app-alert-warning-close-icon-hover-color: var(--clr-app-alert-warning-font-color);
  --clr-app-alert-danger-bg-color: var(--cds-alias-status-danger);
  --clr-app-alert-danger-font-color: var(--cds-global-typography-color-100);
  --clr-app-alert-danger-icon-color: var(--clr-app-alert-danger-font-color);
  --clr-app-alert-danger-close-icon-color: var(--clr-app-alert-danger-font-color);
  --clr-app-alert-danger-action-color: var(--clr-app-alert-danger-font-color);
  --clr-app-alert-danger-action-active-color: var(--clr-app-alert-danger-font-color);
  --clr-app-alert-danger-close-icon-hover-color: var(--clr-app-alert-danger-font-color);
  --clr-app-alert-success-bg-color: var(--cds-alias-status-success);
  --clr-app-alert-success-font-color: var(--cds-global-typography-color-100);
  --clr-app-alert-success-icon-color: var(--clr-app-alert-success-font-color);
  --clr-app-alert-success-close-icon-color: var(--clr-app-alert-success-font-color);
  --clr-app-alert-success-action-color: var(--clr-app-alert-success-font-color);
  --clr-app-alert-success-action-active-color: var(--clr-app-alert-success-font-color);
  --clr-app-alert-success-close-icon-hover-color: var(--clr-app-alert-success-font-color);
  --clr-app-alert-pager-text-color: var(--cds-global-typography-color-500);
  --clr-app-alert-info-pager-bg-color: var(--cds-alias-status-info-shade);
  --clr-app-alert-warning-pager-bg-color: var(--cds-alias-status-warning-shade);
  --clr-app-alert-danger-pager-bg-color: var(--cds-alias-status-danger-shade);
  --clr-app-alert-info-pager-font-color: var(--cds-global-color-white);
  --clr-app-alert-warning-pager-font-color: var(--cds-global-color-black);
  --clr-app-alert-danger-pager-font-color: var(--cds-global-color-white);
  --clr-app-alert-success-pager-font-color: var(--cds-global-color-white);
  /* Labels */
  --clr-label-font-color-light: var(--cds-global-typography-color-500);
  --clr-label-font-color-dark: var(--cds-global-typography-color-500);
  --clr-label-default-border-color: var(--cds-alias-status-neutral);
  --clr-label-bg-hover-color: var(--cds-alias-status-neutral-tint);
  --clr-label-gray-bg-color: var(--cds-alias-status-neutral);
  --clr-label-gray-color: var(--clr-label-font-color-light);
  --clr-label-purple-bg-color: var(--cds-global-color-violet-600);
  --clr-label-purple-color: var(--clr-label-font-color-light);
  --clr-label-blue-bg-color: var(--cds-global-color-blue-800);
  --clr-label-blue-color: var(--clr-label-font-color-light);
  --clr-label-orange-bg-color: var(--cds-global-color-ochre-800);
  --clr-label-orange-color: var(--clr-label-font-color-dark);
  --clr-label-light-blue-bg-color: var(--cds-global-color-blue-600);
  --clr-label-light-blue-color: var(--clr-label-font-color-dark);
  --clr-label-info-bg-color: var(--cds-alias-status-tint);
  --clr-label-info-font-color: var(--clr-label-font-color-light);
  --clr-label-info-border-color: var(--cds-alias-status-info);
  --clr-label-success-bg-color: var(--cds-alias-status-tint);
  --clr-label-success-font-color: var(--clr-label-font-color-light);
  --clr-label-success-border-color: var(--cds-alias-status-success);
  --clr-label-warning-bg-color: var(--cds-alias-status-tint);
  --clr-label-warning-font-color: var(--clr-label-font-color-light);
  --clr-label-warning-border-color: var(--cds-alias-status-warning);
  --clr-label-danger-bg-color: var(--cds-alias-status-tint);
  --clr-label-danger-font-color: var(--clr-label-font-color-light);
  --clr-label-danger-border-color: var(--cds-alias-status-danger);
  /* Badges */
  --clr-badge-background-color: var(--cds-alias-status-neutral-shade);
  --clr-badge-color: var(--cds-global-color-white);
  --clr-badge-info-bg-color: var(--cds-alias-status-info-shade);
  --clr-badge-info-color: var(--cds-global-color-white);
  --clr-badge-success-bg-color: var(--cds-alias-status-success-shade);
  --clr-badge-success-color: var(--cds-global-color-white);
  --clr-badge-warning-bg-color: var(--cds-alias-status-warning-shade);
  --clr-badge-warning-color: var(--cds-global-color-black);
  --clr-badge-danger-bg-color: var(--cds-alias-status-danger-shade);
  --clr-badge-danger-color: var(--cds-global-color-white);
  --clr-badge-gray-bg-color: var(--cds-global-color-gray-600);
  --clr-badge-gray-color: var(--cds-global-color-white);
  --clr-badge-purple-bg-color: var(--cds-global-color-violet-500);
  --clr-badge-purple-color: var(--cds-global-color-white);
  --clr-badge-blue-bg-color: var(--cds-global-color-blue-800);
  --clr-badge-blue-color: var(--cds-global-color-white);
  --clr-badge-orange-bg-color: var(--cds-global-color-tangerine-400);
  --clr-badge-orange-color: var(--cds-global-color-black);
  --clr-badge-light-blue-bg-color: var(--cds-global-color-blue-300);
  --clr-badge-light-blue-color: var(--cds-global-color-black);
  /* Progress Bars */
  --clr-progress-default-color: var(--cds-alias-status-info);
  --clr-progress-alt-color-1: var(--cds-alias-status-success);
  --clr-progress-alt-color-2: var(--cds-alias-status-danger);
  --clr-progress-alt-color-3: var(--clr-progress-alt-color-2);
  --clr-progress-bg-color: var(--cds-alias-object-border-color-tint);
  /* Accordion */
  --clr-accordion-text-color: var(--cds-alias-object-interaction-color);
  --clr-accordion-active-background-color: var(--cds-alias-object-interaction-background-selected);
  --clr-accordion-content-background-color: var(--cds-alias-object-app-background);
  --clr-accordion-header-background-color: var(--cds-alias-object-container-background-tint);
  --clr-accordion-header-hover-background-color: var(--cds-alias-object-interaction-background-hover);
  --clr-accordion-error-color: var(--cds-alias-status-danger);
  --clr-accordion-complete-color: var(--cds-alias-status-success);
  --clr-accordion-border-color: var(--cds-alias-object-border-color);
  --clr-accordion-border-left-color: var(--cds-alias-object-border-color-tint);
  --clr-accordion-border-left-color-complete: var(--clr-accordion-complete-color);
  --clr-accordion-border-left-color-error: var(--clr-accordion-error-color);
  /* Cards */
  --clr-card-bg-color: var(--cds-alias-object-container-background);
  --clr-card-divider-color: var(--cds-alias-object-border-color);
  --clr-card-title-color: var(--clr-h4-color);
  --clr-card-border-color: var(--cds-alias-object-container-border-color);
  --clr-card-box-shadow-color: var(--clr-card-border-color);
  --clr-card-clickable-border-color: var(--cds-alias-object-interaction-background-highlight);
  --clr-card-clickable-box-shadow-color: var(--clr-card-clickable-border-color);
  --clr-card-border-radius: var(--cds-alias-object-border-radius-100);
  /* Forms */
  --clr-form-disabled-background-color: var(--cds-alias-status-disabled-tint);
  --clr-forms-label-color: var(--cds-global-typography-color-400);
  --clr-forms-text-color: var(--cds-global-typography-color-500);
  --clr-forms-invalid-color: var(--cds-alias-status-danger);
  --clr-forms-valid-color: var(--cds-alias-status-success);
  --clr-forms-valid-text-color: var(--cds-alias-status-success);
  --clr-forms-subtext-color: var(--cds-global-typography-color-300);
  --clr-forms-placeholder-color: var(--cds-global-typography-color-200);
  --clr-forms-border-color: var(--cds-alias-object-interaction-border-color);
  --clr-forms-focused-color: var(--cds-alias-status-info);
  --clr-forms-subtext-disabled-color: var(--cds-alias-status-disabled);
  --clr-forms-border-disabled-color: var(--cds-alias-object-border-color-tint);
  --clr-forms-text-disabled-color: var(--cds-alias-status-disabled);
  --clr-forms-label-disabled-color: var(--cds-alias-status-disabled);
  --clr-forms-textarea-background-color: var(--cds-alias-object-container-background);
  --clr-forms-select-caret-hover-color: var(--cds-alias-object-interaction-color-hover);
  --clr-forms-select-caret-color: var(--cds-alias-object-interaction-color);
  --clr-forms-select-option-color: var(--clr-forms-text-color);
  --clr-forms-select-multiple-background-color: var(--clr-forms-textarea-background-color);
  --clr-forms-select-multiple-border-color: var(--cds-alias-object-border-color);
  --clr-forms-select-multiple-option-color: var(--clr-forms-text-color);
  --clr-forms-checkbox-label-color: var(--clr-forms-label-color);
  --clr-forms-checkbox-background-color: var(--cds-alias-status-info);
  --clr-forms-checkbox-indeterminate-border-color: var(--cds-alias-status-info);
  --clr-forms-checkbox-mark-color: var(--cds-global-typography-color-100);
  --clr-forms-checkbox-disabled-background-color: var(--clr-form-disabled-background-color);
  --clr-forms-checkbox-disabled-mark-color: var(--cds-global-typography-color-100);
  --clr-forms-radio-label-color: var(--clr-forms-checkbox-label-color);
  --clr-forms-radio-disabled-background-color: var(--clr-form-disabled-background-color);
  --clr-forms-radio-disabled-mark-color: var(--clr-forms-checkbox-disabled-mark-color);
  --clr-forms-range-progress-fill-color: var(--cds-alias-status-info);
  --clr-forms-range-track-color: var(--cds-alias-object-border-color);
  /* Combobox */
  --clr-combobox-border-color: var(--cds-alias-object-border-color);
  --clr-combobox-trigger-color: var(--clr-color-neutral-500);
  --clr-combobox-input-background-color: var(--cds-alias-object-container-background-tint);
  --clr-combobox-pill-background-color: var(--cds-alias-object-interaction-background);
  --clr-combobox-pill-border-color: var(--cds-alias-object-interaction-border-color);
  --clr-combobox-pill-font-color: var(--cds-global-typography-color-500);
  --clr-combobox-filter-highlight: var(--cds-alias-object-interaction-background-highlight);
  /* Datepicker */
  --clr-calendar-background-color: var(--cds-alias-object-overlay-background);
  --clr-calendar-border-color: var(--cds-alias-object-container-border-color);
  --clr-datepicker-trigger-color: var(--cds-alias-status-info);
  --clr-datepicker-trigger-hover-color: var(--clr-color-action-800);
  --clr-calendar-btn-color: var(--cds-alias-status-info);
  --clr-calendar-btn-hover-focus-color: var(--cds-alias-object-interaction-background-hover);
  --clr-calendar-today-date-cell-color: var(--cds-global-typography-color-500);
  --clr-calendar-active-cell-background-color: var(--cds-alias-object-interaction-background-selected);
  --clr-calendar-active-focus-cell-background-color: var(--cds-alias-object-interaction-background-selected);
  --clr-calendar-active-cell-color: var(--cds-global-typography-color-500);
  /* Dropdown */
  --clr-dropdown-active-text-color: var(--cds-alias-object-interaction-color-active);
  --clr-dropdown-bg-color: var(--cds-alias-object-overlay-background);
  --clr-dropdown-border-color: var(--cds-alias-object-border-color);
  --clr-dropdown-divider-color: var(--cds-alias-object-border-color-tint);
  --clr-dropdown-child-border-color: var(--cds-alias-object-border-color);
  --clr-dropdown-bg-hover-color: var(--cds-alias-object-interaction-background-hover);
  --clr-dropdown-selection-color: var(--cds-alias-object-interaction-background-selected);
  --clr-dropdown-box-shadow: var(--clr-popover-box-shadow-color);
  --clr-dropdown-text-color: var(--clr-global-font-color);
  --clr-dropdown-header-color: var(--cds-global-typography-color-400);
  --clr-dropdown-item-color: var(--cds-global-typography-color-300);
  /* Header */
  /* Modal */
  --clr-modal-title-color: var(--cds-global-typography-color-400);
  --clr-modal-close-color: var(--cds-alias-object-interaction-color);
  --clr-modal-bg-color: var(--cds-alias-object-overlay-background);
  --clr-modal-backdrop-color: var(--cds-alias-object-overlay-backdrop-background);
  /* Navigation */
  --clr-link-active-color: var(--cds-global-typography-link-color);
  --clr-link-color: var(--cds-global-typography-link-color);
  --clr-link-hover-color: var(--cds-global-typography-link-color-hover);
  --clr-link-visited-color: var(--cds-global-typography-link-color-visited);
  --clr-link-visited-color-hover: var(--cds-global-typography-link-color-visited-hover);
  --clr-custom-links-hover-color: var(--cds-global-color-gray-200);
  /* Responsive Navigation */
  --clr-sliding-panel-text-color: var(--cds-global-color-gray-700);
  --clr-nav-background-color: var(--cds-global-color-gray-200);
  --clr-responsive-nav-hover-bg: var(--cds-global-color-gray-0);
  --clr-responsive-nav-trigger-bg-color: var(--cds-global-color-gray-0);
  --clr-responsive-nav-header-backdrop-bg-color: var(--cds-global-color-gray-1000);
  /* Signpost */
  --clr-signpost-content-bg-color: var(--cds-alias-object-overlay-background);
  --clr-signpost-content-border-color: var(--cds-alias-object-border-color);
  --clr-signpost-action-color: var(--cds-alias-object-interaction-color);
  --clr-signpost-action-hover-color: var(--cds-alias-object-interaction-color-hover);
  --clr-signpost-border-size: 0.6rem;
  --clr-signpost-pointer-border: var(--clr-signpost-border-size) solid var(--cds-alias-object-border-color);
  --clr-signpost-pointer-psuedo-border: var(--clr-signpost-border-size) solid var(--clr-signpost-content-bg-color);
  /* StackView */
  --clr-stack-view-border-color: var(--cds-alias-object-border-color);
  --clr-stack-view-bg-color: var(--cds-alias-object-container-background);
  --clr-stack-view-stack-block-border-bottom: var(--cds-alias-object-border-color);
  --clr-stack-view-color: var(--cds-global-typography-color-500);
  --clr-stack-view-stack-block-label-text-color: var(--cds-global-typography-color-500);
  --clr-stack-view-border-box-color: var(--cds-alias-object-border-color-tint);
  --clr-stack-block-changed-border-top-color: var(--cds-alias-object-interaction-background-highlight);
  --clr-stack-view-stack-block-label-and-content-bg-color: var(--cds-alias-object-container-background-tint);
  --clr-stack-view-stack-children-stack-block-border-bottom-color: var(--cds-alias-object-border-color-tint);
  --clr-stack-view-stack-children-stack-block-label-and-content-bg-color: var(--cds-alias-object-container-background);
  --clr-stack-view-stack-block-expanded-bg-color: var(--clr-global-selection-color);
  --clr-stack-view-stack-block-expandable-hover: var(--cds-alias-object-interaction-background-hover);
  --clr-stack-view-stack-block-content-text-color: inherit;
  --clr-stack-view-stack-block-expanded-text-color: var(--cds-global-typography-color-500);
  --clr-stack-view-stack-block-caret-color: var(--cds-global-typography-color-500);
  /* Subnav */
  --clr-subnav-bg-color: var(--cds-alias-object-container-background);
  /* Tabs */
  --clr-nav-box-shadow-color: var(--cds-alias-object-border-color);
  --clr-nav-active-box-shadow-color: var(--cds-alias-object-interaction-background-highlight);
  --clr-nav-active-bg-color: var(--cds-alias-object-interaction-background-active);
  --clr-nav-hover-bg-color: var(--cds-alias-object-interaction-background-hover);
  --clr-nav-link-color: var(--cds-alias-object-interaction-color);
  --clr-nav-link-active-color: var(--cds-alias-object-interaction-color-active);
  /* Timeline */
  --clr-timeline-line-color: var(--cds-alias-object-border-color-shade);
  --clr-timeline-step-header-color: var(--cds-alias-status-neutral);
  --clr-timeline-step-title-color: var(--cds-alias-object-interaction-color);
  --clr-timeline-step-description-color: var(--cds-global-typography-color-500);
  --clr-timeline-incomplete-step-color: var(--cds-alias-object-border-color-shade);
  --clr-timeline-current-step-color: var(--cds-alias-object-interaction-background-highlight);
  --clr-timeline-success-step-color: var(--cds-alias-status-success);
  --clr-timeline-error-step-color: var(--cds-alias-status-danger);
  /* Toggles */
  --clr-toggle-bg-color-off: var(--cds-alias-status-neutral);
  --clr-toggle-bg-color-on: var(--cds-alias-status-success);
  --clr-toggle-handle-bg-color: var(--cds-global-color-construction-50);
  --clr-toggle-disabled-default-border-color: var(--cds-global-color-gray-400);
  --clr-toggle-disabled-default-handle-color: var(--cds-global-color-construction-50);
  --clr-toggle-disabled-off-border-color: var(--clr-toggle-disabled-default-border-color);
  --clr-toggle-disabled-off-bg-color: var(--clr-toggle-disabled-default-handle-color);
  --clr-toggle-disabled-off-handle-border-color: var(--clr-toggle-disabled-default-border-color);
  --clr-toggle-disabled-on-border-color: var(--clr-toggle-disabled-default-border-color);
  --clr-toggle-disabled-on-bg-color: var(--clr-toggle-disabled-default-border-color);
  --clr-toggle-disabled-on-handle-border-color: var(--clr-toggle-disabled-default-handle-color);
  /* Tooltips */
  --clr-tooltip-background-color: var(--cds-global-color-gray-1000);
  --clr-tooltip-color: var(--cds-global-color-construction-50);
  /* Wizard */
  --clr-wizard-main-bgcolor: var(--cds-alias-object-overlay-background);
  --clr-wizard-stepnav-bgcolor: var(--cds-alias-object-container-background-tint);
  --clr-wizard-main-text-color: var(--cds-global-typography-color-500);
  --clr-wizard-stepnav-text: var(--cds-global-typography-color-500);
  --clr-wizard-stepnav-text--active: var(--clr-global-on-selection-color);
  --clr-wizard-title-text: var(--cds-global-typography-color-500);
  --clr-wizard-stepnav-item-border-color: var(--cds-alias-object-border-color);
  --clr-wizard-stepnav-item-border-color--active: var(--cds-alias-status-success);
  --clr-wizard-stepnav-active-bgcolor: var(--clr-global-selection-color);
  --clr-wizard-header-action-color: var(--cds-global-color-gray-600);
  --clr-wizard-header-action-color--hovered: var(--cds-global-color-gray-1000);
  --clr-wizard-stepnav-border-color: var(--cds-alias-object-border-color);
  --clr-wizard-box-shadow-color: rgba(0, 0, 0, 0.2);
  /* Tree View */
  --clr-tree-node-caret-link-hover-color: var(--cds-alias-object-interaction-color-hover);
  --clr-tree-link-hover-color: var(--cds-alias-object-interaction-background-hover);
  --clr-tree-link-selection-color: var(--clr-global-selection-color);
  --clr-tree-link-text-color: var(--cds-global-typography-color-500);
  --clr-tree-node-caret-color: var(--cds-global-color-gray-500);
  /* Vertical Nav */
  --clr-vertical-nav-divider-color: var(--cds-alias-object-border-color);
  --clr-vertical-nav-icon-active-color: var(--cds-alias-object-interaction-color);
  --clr-vertical-nav-item-color: var(--cds-alias-object-interaction-color);
  --clr-vertical-nav-item-active-color: var(--cds-alias-object-interaction-color-active);
  --clr-vertical-nav-bg-color: var(--cds-alias-object-container-background);
  --clr-vertical-nav-active-bg-color: var(--cds-alias-object-interaction-background-selected);
  --clr-vertical-nav-hover-bg-color: var(--cds-alias-object-interaction-background-hover);
  --clr-vertical-nav-toggle-icon-color: var(--cds-alias-object-interaction-color);
  --clr-vertical-nav-trigger-divider-border-color: var(--cds-alias-object-border-color);
  /* Tables */
  --clr-table-bgcolor: var(--cds-alias-object-container-background);
  --clr-thead-bgcolor: var(--cds-alias-object-container-background-tint);
  --clr-table-header-border-bottom-color: var(--cds-alias-object-border-color);
  --clr-table-footer-border-top-color: var(--cds-alias-object-border-color);
  --clr-table-border-color: var(--cds-alias-object-border-color);
  --clr-tablerow-bordercolor: var(--cds-alias-object-border-color);
  --clr-table-font-color: var(--cds-global-typography-color-500);
  --clr-thead-color: var(--cds-global-typography-color-500);
  /* Datagrid */
  --clr-datagrid-font-color: var(--cds-global-typography-color-500);
  --clr-datagrid-default-border-color: var(--cds-alias-object-border-color);
  --clr-datagrid-icon-color: var(--cds-alias-object-interaction-color);
  --clr-datagrid-row-hover-color: var(--cds-alias-object-interaction-background-hover);
  --clr-datagrid-row-hover-font-color: var(--cds-global-typography-color-500);
  --clr-datagrid-action-toggle-color: var(--cds-alias-object-interaction-background-active);
  --clr-datagrid-pagination-btn-color: var(--cds-alias-object-interaction-color);
  --clr-datagrid-pagination-btn-disabled-color: var(--cds-alias-status-disabled);
  --clr-datagrid-pagination-input-border-color: var(--cds-alias-object-border-color);
  --clr-datagrid-pagination-input-border-focus-color: var(--clr-color-action-400);
  --clr-datagrid-popover-bg-color: var(--cds-alias-object-overlay-background);
  --clr-datagrid-popover-border-color: var(--cds-alias-object-border-color);
  --clr-datagrid-action-popover-hover-color: var(--cds-alias-object-interaction-background-hover);
  --clr-datagrid-row-selected: var(--cds-global-typography-color-500);
  --clr-datagrid-column-switch-header-font-color: var(--cds-global-color-gray-500);
  --clr-datagrid-column-switch-header-font-hover-color: var(--cds-alias-object-interaction-background-highlight);
  --clr-datagrid-detail-caret-icon-open-bg-color: var(--cds-alias-object-interaction-background-highlight);
  --clr-datagrid-detail-caret-icon-open-icon-color: var(--cds-global-color-gray-0);
  --clr-datagrid-placeholder-color: var(--cds-global-color-gray-700);
  --clr-datagrid-loading-background: var(--cds-alias-object-opacity-100);
  --clr-datagrid-column-toggle-border-color: var(--cds-alias-object-border-color);
  --clr-datagrid-column-toggle-fill-color: var(--clr-btn-outline-bg-color);
  --clr-datagrid-column-toggle-text-color: var(--cds-global-typography-color-400);
  --clr-datagrid-column-toggle-border-hover-color: var(--cds-alias-object-interaction-border-color);
  --clr-datagrid-column-toggle-fill-hover-color: var(--cds-alias-object-interaction-background-hover);
  --clr-datagrid-column-toggle-text-hover-color: var(--cds-global-typography-color-500);
  --clr-datagrid-column-toggle-border-active-color: var(--cds-alias-object-interaction-border-color);
  --clr-datagrid-column-toggle-fill-active-color: var(--cds-alias-object-interaction-background-selected);
  --clr-datagrid-column-toggle-text-active-color: var(--cds-global-typography-color-500);
}
[cds-theme] .login-wrapper {
  --clr-login-background-color: var(--clr-global-app-background);
  --clr-login-title-color: var(--clr-h1-color);
  --clr-login-error-background-color: var(--clr-alert-danger-bg-color);
}
[cds-theme] .login-wrapper .login .login-group .error {
  color: var(--clr-alert-danger-font-color);
  border: 1px solid var(--clr-alert-danger-border-color);
}
[cds-theme] .btn:not([disabled]):hover,
[cds-theme] .btn:not([disabled]):focus,
[cds-theme] .btn:not([disabled]):active {
  filter: brightness(90%);
}
[cds-theme] .btn.disabled,
[cds-theme] .btn:disabled {
  opacity: 1;
}
[cds-theme] .btn-primary,
[cds-theme] .btn-success,
[cds-theme] .btn-warning,
[cds-theme] .btn-danger {
  --clr-btn-icon-disabled-color: var(--cds-global-typography-color-100);
}

[cds-theme~=light] {
  --clr-vertical-nav-bg-color: var(--cds-global-color-gray-200);
  --clr-vertical-nav-active-bg-color: var(--cds-global-color-gray-0);
  --clr-vertical-nav-hover-bg-color: var(--cds-global-color-gray-400);
}

[cds-theme~=dark] {
  --clr-datagrid-loading-background: var(--cds-alias-object-opacity-300);
}

/*# sourceMappingURL=shim.cds-core.css.map */