@cds/core/styles/theme.dark.css

Clarity Design System - common components, themes, and utilties

/*
 * 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.
 */
[cds-theme~=dark] {
  --cds-global-typography-color-500: var(--cds-global-color-white);
  --cds-global-typography-color-400: var(--cds-global-color-construction-100);
  --cds-global-typography-color-300: var(--cds-global-color-construction-200);
  --cds-global-typography-color-200: var(--cds-global-color-construction-300);
  --cds-global-typography-color-100: var(--cds-global-color-black);
  --cds-global-typography-link-color: var(--cds-global-color-blue-400);
  --cds-global-typography-link-color-hover: var(--cds-global-color-blue-200);
  --cds-global-typography-link-color-visited: var(--cds-global-color-lavender-300);
  --cds-global-typography-link-color-visited-hover: var(--cds-global-color-lavender-200);
  --cds-global-typography-color-450: var(--cds-global-color-construction-50);
  --cds-global-typography-disabled-button: var(--cds-global-color-construction-900);
  --cds-global-typography-disabled: var(--cds-global-color-construction-500);
  --cds-global-typography-info-hover: var(--cds-global-color-blue-200);
  --cds-global-typography-success-hover: var(--cds-global-color-green-400);
  --cds-global-typography-warning-hover: var(--cds-global-color-yellow-600);
  --cds-global-typography-danger-hover: var(--cds-global-color-red-400);
  --cds-global-typography-neutral-hover: var(--cds-global-color-construction-200);
  --cds-global-typography-link-on-colorbg: var(--cds-global-color-construction-1000);
  --cds-alias-typography-color-100: var(--cds-global-color-black);
  --cds-alias-typography-color-200: var(--cds-global-color-construction-300);
  --cds-alias-typography-color-300: var(--cds-global-color-construction-200);
  --cds-alias-typography-color-400: var(--cds-global-color-construction-100);
  --cds-alias-typography-color-450: var(--cds-global-color-construction-50);
  --cds-alias-typography-color-500: var(--cds-global-color-white);
  --cds-alias-typography-disabled-button: var(--cds-global-color-construction-900);
  --cds-alias-typography-disabled: var(--cds-global-color-construction-500);
  --cds-alias-typography-info-hover: var(--cds-global-color-blue-200);
  --cds-alias-typography-success-hover: var(--cds-global-color-green-400);
  --cds-alias-typography-warning-hover: var(--cds-global-color-yellow-600);
  --cds-alias-typography-danger-hover: var(--cds-global-color-red-400);
  --cds-alias-typography-neutral-hover: var(--cds-global-color-construction-200);
  --cds-alias-typography-link-on-colorbg: var(--cds-global-color-construction-1000);
  --cds-alias-typography-link-color: var(--cds-global-color-blue-400);
  --cds-alias-typography-link-color-hover: var(--cds-global-color-blue-200);
  --cds-alias-typography-link-color-visited: var(--cds-global-color-lavender-300);
  --cds-alias-typography-link-color-visited-hover: var(--cds-global-color-lavender-200);
  --cds-alias-object-app-background: var(--cds-global-color-construction-1000);
  --cds-alias-object-container-backdrop-background: var(--cds-alias-object-opacity-300);
  --cds-alias-object-container-background: var(--cds-global-color-construction-900);
  --cds-alias-object-container-background-tint: var(--cds-global-color-construction-1000);
  --cds-alias-object-container-background-shade: var(--cds-global-color-construction-800);
  --cds-alias-object-container-background-dark: var(--cds-global-color-construction-1100);
  --cds-alias-object-container-background-inverse: var(--cds-global-color-construction-200);
  --cds-alias-object-container-background-inverse-tint: var(--cds-global-color-construction-100);
  --cds-alias-object-container-background-inverse-shade: var(--cds-global-color-construction-300);
  --cds-alias-object-container-border-color: var(--cds-global-color-black);
  --cds-alias-object-overlay-background: var(--cds-global-color-construction-900);
  --cds-alias-object-border-color: var(--cds-global-color-construction-500);
  --cds-alias-object-border-color-tint: var(--cds-global-color-construction-400);
  --cds-alias-object-border-color-shade: var(--cds-global-color-construction-600);
  --cds-alias-object-shadow-100: 0 var(--cds-global-space-1) var(--cds-global-space-2) 0 var(--cds-alias-object-opacity-300);
  --cds-alias-object-shadow-200: 0 var(--cds-global-space-1) var(--cds-global-space-2) 0 var(--cds-alias-object-opacity-200);
  --cds-alias-object-shadow-300: 0 var(--cds-global-space-1) var(--cds-global-space-2) 0 var(--cds-alias-object-opacity-100);
  --cds-alias-object-interaction-color: var(--cds-global-color-construction-200);
  --cds-alias-object-interaction-color-hover: var(--cds-global-color-construction-50);
  --cds-alias-object-interaction-color-active: var(--cds-global-color-construction-100);
  --cds-alias-object-interaction-color-selected: var(--cds-global-color-construction-200);
  --cds-alias-object-interaction-color-disabled: var(--cds-global-color-construction-600);
  --cds-alias-object-interaction-background: var(--cds-global-color-construction-1000);
  --cds-alias-object-interaction-background-hover: var(--cds-global-color-construction-800);
  --cds-alias-object-interaction-background-active: var(--cds-global-color-construction-600);
  --cds-alias-object-interaction-background-selected: var(--cds-global-color-blue-900);
  --cds-alias-object-interaction-background-selected-active: var(--cds-global-color-construction-600);
  --cds-alias-object-interaction-background-selected-hover: var(--cds-global-color-construction-700);
  --cds-alias-object-interaction-background-disabled: var(--cds-global-color-construction-700);
  --cds-alias-object-interaction-background-highlight: var(--cds-global-color-blue-400);
  --cds-alias-object-interaction-background-shade: var(--cds-global-color-construction-1100);
  --cds-alias-object-interaction-background-shade-hover: var(--cds-global-color-construction-600);
  --cds-alias-object-interaction-background-shade-active: var(--cds-global-color-construction-800);
  --cds-alias-object-interaction-background-shade-selected: var(--cds-global-color-construction-700);
  --cds-alias-object-interaction-background-shade-selected-hover: var(--cds-global-color-construction-800);
  --cds-alias-object-interaction-background-shade-selected-active: var(--cds-global-color-construction-600);
  --cds-alias-object-interaction-border-color: var(--cds-global-color-construction-300);
  --cds-alias-object-interaction-info-hover: var(--cds-global-color-blue-300);
  --cds-alias-object-interaction-info-active: var(--cds-global-color-blue-500);
  --cds-alias-object-interaction-info-selected: var(--cds-global-color-blue-500);
  --cds-alias-object-interaction-info-click: var(--cds-global-color-blue-500);
  --cds-alias-object-interaction-info-secondary-hover: var(--cds-global-color-blue-1000);
  --cds-alias-object-interaction-success-hover: var(--cds-global-color-green-400);
  --cds-alias-object-interaction-success-active: var(--cds-global-color-green-600);
  --cds-alias-object-interaction-success-click: var(--cds-global-color-green-600);
  --cds-alias-object-interaction-success-secondary-hover: var(--cds-global-color-green-1000);
  --cds-alias-object-interaction-warning-hover: var(--cds-global-color-yellow-300);
  --cds-alias-object-interaction-warning-active: var(--cds-global-color-yellow-500);
  --cds-alias-object-interaction-warning-click: var(--cds-global-color-yellow-500);
  --cds-alias-object-interaction-warning-secondary-hover: var(--cds-global-color-yellow-1000);
  --cds-alias-object-interaction-danger-hover: var(--cds-global-color-red-400);
  --cds-alias-object-interaction-danger-active: var(--cds-global-color-red-600);
  --cds-alias-object-interaction-danger-click: var(--cds-global-color-red-600);
  --cds-alias-object-interaction-danger-secondary-hover: var(--cds-global-color-red-1000);
  --cds-alias-object-interaction-neutral-hover: var(--cds-global-color-construction-200);
  --cds-alias-object-interaction-neutral-active: var(--cds-global-color-construction-400);
  --cds-alias-object-interaction-neutral-click: var(--cds-global-color-construction-400);
  --cds-alias-object-interaction-neutral-secondary-hover: var(--cds-global-color-construction-800);
  --cds-alias-object-interaction-inverse-hover: var(--cds-global-color-construction-700);
  --cds-alias-object-interaction-inverse-active: var(--cds-global-color-construction-800);
  --cds-alias-object-interaction-inverse-click: var(--cds-global-color-construction-800);
  --cds-alias-status-tint: transparent;
  --cds-alias-status-info: var(--cds-global-color-blue-400);
  --cds-alias-status-info-tint: var(--cds-global-color-blue-800);
  --cds-alias-status-info-shade: var(--cds-global-color-blue-500);
  --cds-alias-status-success: var(--cds-global-color-green-500);
  --cds-alias-status-success-tint: var(--cds-global-color-green-800);
  --cds-alias-status-success-shade: var(--cds-global-color-green-600);
  --cds-alias-status-warning: var(--cds-global-color-ochre-400);
  --cds-alias-status-warning-tint: var(--cds-global-color-ochre-900);
  --cds-alias-status-warning-shade: var(--cds-global-color-ochre-500);
  --cds-alias-status-warning-dark: var(--cds-global-color-ochre-600);
  --cds-alias-status-danger: var(--cds-global-color-red-500);
  --cds-alias-status-danger-tint: var(--cds-global-color-red-900);
  --cds-alias-status-danger-shade: var(--cds-global-color-red-600);
  --cds-alias-status-danger-dark: var(--cds-global-color-red-900);
  --cds-alias-status-neutral: var(--cds-global-color-construction-300);
  --cds-alias-status-neutral-tint: var(--cds-global-color-construction-700);
  --cds-alias-status-neutral-shade: var(--cds-global-color-construction-400);
  --cds-alias-status-disabled: var(--cds-global-color-construction-600);
  --cds-alias-status-disabled-tint: var(--cds-global-color-construction-700);
  --cds-alias-status-disabled-shade: var(--cds-global-color-construction-500);
  --cds-alias-utility-gray: var(--cds-global-color-construction-300);
  --cds-alias-utility-gray-tint: var(--cds-global-color-construction-1000);
  --cds-alias-utility-gray-shade: var(--cds-global-color-construction-200);
  --cds-alias-utility-blue: var(--cds-global-color-blue-300);
  --cds-alias-utility-blue-tint: var(--cds-global-color-blue-1000);
  --cds-alias-utility-blue-shade: var(--cds-global-color-blue-200);
  --cds-alias-utility-light-blue: var(--cds-global-color-blue-700);
  --cds-alias-utility-light-blue-tint: var(--cds-global-color-blue-1000);
  --cds-alias-utility-light-blue-shade: var(--cds-global-color-blue-500);
  --cds-alias-utility-dark-blue: var(--cds-global-color-azure-200);
  --cds-alias-utility-dark-blue-tint: var(--cds-global-color-azure-1000);
  --cds-alias-utility-dark-blue-shade: var(--cds-global-color-azure-50);
  --cds-alias-utility-green: var(--cds-global-color-green-400);
  --cds-alias-utility-green-tint: var(--cds-global-color-green-1000);
  --cds-alias-utility-green-shade: var(--cds-global-color-green-200);
  --cds-alias-utility-yellow: var(--cds-global-color-ochre-400);
  --cds-alias-utility-yellow-tint: var(--cds-global-color-ochre-900);
  --cds-alias-utility-yellow-shade: var(--cds-global-color-ochre-300);
  --cds-alias-utility-red: var(--cds-global-color-red-500);
  --cds-alias-utility-red-tint: var(--cds-global-color-red-1000);
  --cds-alias-utility-red-shade: var(--cds-global-color-red-200);
  --cds-alias-utility-tangerine: var(--cds-global-color-tangerine-600);
  --cds-alias-utility-tangerine-tint: var(--cds-global-color-tangerine-1000);
  --cds-alias-utility-tangerine-shade: var(--cds-global-color-tangerine-400);
  --cds-alias-utility-violet: var(--cds-global-color-violet-400);
  --cds-alias-utility-violet-tint: var(--cds-global-color-violet-1000);
  --cds-alias-utility-violet-shade: var(--cds-global-color-violet-200);
  --cds-alias-viz-border: var(--cds-global-color-cool-gray-50);
  --cds-alias-viz-general-1: var(--cds-global-color-blue-400);
  --cds-alias-viz-general-1-blue: var(--cds-global-color-blue-400);
  --cds-alias-viz-general-2: var(--cds-global-color-violet-500);
  --cds-alias-viz-general-2-violet: var(--cds-global-color-violet-400);
  --cds-alias-viz-general-3: var(--cds-global-color-aqua-200);
  --cds-alias-viz-general-3-aqua: var(--cds-global-color-aqua-200);
  --cds-alias-viz-general-4: var(--cds-global-color-lavender-400);
  --cds-alias-viz-general-4-lime: var(--cds-global-color-lime-300);
  --cds-alias-viz-general-5: var(--cds-global-color-pink-400);
  --cds-alias-viz-general-5-blue: var(--cds-global-color-blue-200);
  --cds-alias-viz-general-6: var(--cds-global-color-lime-400);
  --cds-alias-viz-general-6-aqua: var(--cds-global-color-aqua-50);
  --cds-alias-viz-general-7: var(--cds-global-color-lavender-300);
  --cds-alias-viz-general-7-violet: var(--cds-global-color-violet-200);
  --cds-alias-viz-general-8: var(--cds-global-color-aqua-400);
  --cds-alias-viz-general-8-lime: var(--cds-global-color-lime-100);
  --cds-alias-viz-general-9: var(--cds-global-color-lime-200);
  --cds-alias-viz-general-9-blue: var(--cds-global-color-blue-300);
  --cds-alias-viz-general-10: var(--cds-global-color-violet-300);
  --cds-alias-viz-general-10-lime: var(--cds-global-color-lime-50);
  --cds-alias-viz-general-11: var(--cds-global-color-jade-400);
  --cds-alias-viz-general-11-aqua: var(--cds-global-color-aqua-400);
  --cds-alias-viz-general-12: var(--cds-global-color-azure-100);
  --cds-alias-viz-general-12-violet: var(--cds-global-color-violet-50);
  --cds-alias-viz-general-13: var(--cds-global-color-violet-400);
  --cds-alias-viz-general-13-violet: var(--cds-global-color-violet-300);
  --cds-alias-viz-general-14: var(--cds-global-color-green-200);
  --cds-alias-viz-general-14-blue: var(--cds-global-color-blue-50);
  --cds-alias-viz-general-15: var(--cds-global-color-pink-300);
  --cds-alias-viz-general-15-aqua: var(--cds-global-color-aqua-300);
  --cds-alias-viz-general-16: var(--cds-global-color-azure-300);
  --cds-alias-viz-general-16-lime: var(--cds-global-color-lime-200);
  --cds-alias-viz-severity-neutral: var(--cds-global-color-construction-300);
  --cds-alias-viz-severity-success: var(--cds-global-color-green-500);
  --cds-alias-viz-severity-warning: var(--cds-global-color-yellow-300);
  --cds-alias-viz-severity-warning-light: var(--cds-global-color-yellow-300);
  --cds-alias-viz-severity-immediate: var(--cds-global-color-tangerine-400);
  --cds-alias-viz-severity-critical: var(--cds-global-color-red-700);
  --cds-alias-viz-severity-free-space-fill: var(--cds-global-color-construction-800);
  --cds-alias-viz-sequential-blue-50: var(--cds-global-color-blue-1000);
  --cds-alias-viz-sequential-blue-100: var(--cds-global-color-blue-900);
  --cds-alias-viz-sequential-blue-200: var(--cds-global-color-blue-800);
  --cds-alias-viz-sequential-blue-300: var(--cds-global-color-blue-700);
  --cds-alias-viz-sequential-blue-400: var(--cds-global-color-blue-600);
  --cds-alias-viz-sequential-blue-500: var(--cds-global-color-blue-500);
  --cds-alias-viz-sequential-blue-600: var(--cds-global-color-blue-400);
  --cds-alias-viz-sequential-blue-700: var(--cds-global-color-blue-300);
  --cds-alias-viz-sequential-blue-800: var(--cds-global-color-blue-200);
  --cds-alias-viz-sequential-blue-900: var(--cds-global-color-blue-100);
  --cds-alias-viz-sequential-blue-1000: var(--cds-global-color-blue-50);
  --cds-alias-viz-sequential-violet-50: var(--cds-global-color-violet-1000);
  --cds-alias-viz-sequential-violet-100: var(--cds-global-color-violet-900);
  --cds-alias-viz-sequential-violet-200: var(--cds-global-color-violet-800);
  --cds-alias-viz-sequential-violet-300: var(--cds-global-color-violet-700);
  --cds-alias-viz-sequential-violet-400: var(--cds-global-color-violet-600);
  --cds-alias-viz-sequential-violet-500: var(--cds-global-color-violet-500);
  --cds-alias-viz-sequential-violet-600: var(--cds-global-color-violet-400);
  --cds-alias-viz-sequential-violet-700: var(--cds-global-color-violet-300);
  --cds-alias-viz-sequential-violet-800: var(--cds-global-color-violet-200);
  --cds-alias-viz-sequential-violet-900: var(--cds-global-color-violet-100);
  --cds-alias-viz-sequential-violet-1000: var(--cds-global-color-violet-50);
  --cds-alias-viz-sequential-ochre-50: var(--cds-global-color-ochre-1000);
  --cds-alias-viz-sequential-ochre-100: var(--cds-global-color-ochre-900);
  --cds-alias-viz-sequential-ochre-200: var(--cds-global-color-ochre-800);
  --cds-alias-viz-sequential-ochre-300: var(--cds-global-color-ochre-700);
  --cds-alias-viz-sequential-ochre-400: var(--cds-global-color-ochre-600);
  --cds-alias-viz-sequential-ochre-500: var(--cds-global-color-ochre-500);
  --cds-alias-viz-sequential-ochre-600: var(--cds-global-color-ochre-400);
  --cds-alias-viz-sequential-ochre-700: var(--cds-global-color-ochre-300);
  --cds-alias-viz-sequential-ochre-800: var(--cds-global-color-ochre-200);
  --cds-alias-viz-sequential-ochre-900: var(--cds-global-color-ochre-100);
  --cds-alias-viz-sequential-ochre-1000: var(--cds-global-color-ochre-50);
  --cds-alias-viz-sequential-aqua-50: var(--cds-global-color-aqua-1000);
  --cds-alias-viz-sequential-aqua-100: var(--cds-global-color-aqua-900);
  --cds-alias-viz-sequential-aqua-200: var(--cds-global-color-aqua-800);
  --cds-alias-viz-sequential-aqua-300: var(--cds-global-color-aqua-700);
  --cds-alias-viz-sequential-aqua-400: var(--cds-global-color-aqua-600);
  --cds-alias-viz-sequential-aqua-500: var(--cds-global-color-aqua-500);
  --cds-alias-viz-sequential-aqua-600: var(--cds-global-color-aqua-400);
  --cds-alias-viz-sequential-aqua-700: var(--cds-global-color-aqua-300);
  --cds-alias-viz-sequential-aqua-800: var(--cds-global-color-aqua-200);
  --cds-alias-viz-sequential-aqua-900: var(--cds-global-color-aqua-100);
  --cds-alias-viz-sequential-aqua-1000: var(--cds-global-color-aqua-50);
  --cds-alias-viz-sequential-green-50: var(--cds-global-color-green-1000);
  --cds-alias-viz-sequential-green-100: var(--cds-global-color-green-900);
  --cds-alias-viz-sequential-green-200: var(--cds-global-color-green-800);
  --cds-alias-viz-sequential-green-300: var(--cds-global-color-green-700);
  --cds-alias-viz-sequential-green-400: var(--cds-global-color-green-600);
  --cds-alias-viz-sequential-green-500: var(--cds-global-color-green-500);
  --cds-alias-viz-sequential-green-600: var(--cds-global-color-green-400);
  --cds-alias-viz-sequential-green-700: var(--cds-global-color-green-300);
  --cds-alias-viz-sequential-green-800: var(--cds-global-color-green-200);
  --cds-alias-viz-sequential-green-900: var(--cds-global-color-green-100);
  --cds-alias-viz-sequential-green-1000: var(--cds-global-color-green-50);
  --cds-alias-viz-sequential-red-50: var(--cds-global-color-red-1000);
  --cds-alias-viz-sequential-red-100: var(--cds-global-color-red-900);
  --cds-alias-viz-sequential-red-200: var(--cds-global-color-red-800);
  --cds-alias-viz-sequential-red-300: var(--cds-global-color-red-700);
  --cds-alias-viz-sequential-red-400: var(--cds-global-color-red-600);
  --cds-alias-viz-sequential-red-500: var(--cds-global-color-red-500);
  --cds-alias-viz-sequential-red-600: var(--cds-global-color-red-400);
  --cds-alias-viz-sequential-red-700: var(--cds-global-color-red-300);
  --cds-alias-viz-sequential-red-800: var(--cds-global-color-red-200);
  --cds-alias-viz-sequential-red-900: var(--cds-global-color-red-100);
  --cds-alias-viz-sequential-red-1000: var(--cds-global-color-red-50);
}