@pantheon-systems/pds-design-tokens/build/css/pds-design-tokens-dark-mode.css

Design Tokens for the Pantheon Design System

/**
 * 
 * Pantheon Systems
 * 
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * !! DO NOT EDIT THIS FILE DIRECTLY !!
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * 
 * This file has been generated automatically.
 */

[data-theme="dark"] {
  --pds-color-badge-indicator-brand-background: #745dd8;
  --pds-color-badge-indicator-brand-foreground: #ffffff;
  --pds-color-badge-indicator-critical-background: #a70000;
  --pds-color-badge-indicator-critical-foreground: #ffffff;
  --pds-color-badge-indicator-diamond-background: #d3e7fd;
  --pds-color-badge-indicator-diamond-foreground: #005cc8;
  --pds-color-badge-indicator-gold-background: #ffe668;
  --pds-color-badge-indicator-gold-foreground: #705e00;
  --pds-color-badge-indicator-info-background: #005cc8;
  --pds-color-badge-indicator-info-foreground: #ffffff;
  --pds-color-badge-indicator-neutral-background: #6d6d78;
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
  --pds-color-badge-indicator-platinum-background: #cbc2f0;
  --pds-color-badge-indicator-platinum-foreground: #42318d;
  --pds-color-badge-indicator-silver-background: #e7e7eb;
  --pds-color-badge-indicator-silver-foreground: #2f323d;
  --pds-color-badge-indicator-success-background: #00710f;
  --pds-color-badge-indicator-success-foreground: #ffffff;
  --pds-color-badge-indicator-warning-background: #bd5b00;
  --pds-color-badge-indicator-warning-foreground: #ffffff;
  --pds-color-banner-critical-background: #a70000;
  --pds-color-banner-critical-foreground: #ffffff;
  --pds-color-banner-info-background: #005cc8;
  --pds-color-banner-info-foreground: #ffffff;
  --pds-color-banner-warning-background: #bd5b00;
  --pds-color-banner-warning-foreground: #ffffff;
  --pds-color-bg-critical: var(--pds-color-status-critical-background);
  --pds-color-bg-default: #1a1b20;
  --pds-color-bg-default-secondary: #121219;
  --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
  --pds-color-bg-info: var(--pds-color-status-info-background);
  --pds-color-bg-reverse: #e7e7eb;
  --pds-color-bg-success: var(--pds-color-status-success-background);
  --pds-color-bg-transparent: rgba(0, 0, 0, 0);
  --pds-color-bg-warning: var(--pds-color-status-warning-background);
  --pds-color-border-brand: #9786e2;
  --pds-color-border-critical: var(--pds-color-status-critical-foreground);
  --pds-color-border-default: #6d6d78;
  --pds-color-border-input: #6d6d78;
  --pds-color-border-separator: #6d6d78;
  --pds-color-border-success: var(--pds-color-status-success-foreground);
  --pds-color-brand-accent-default: #de0093;
  --pds-color-brand-primary-default: #745dd8;
  --pds-color-brand-secondary-default: #ffdc28;
  --pds-color-button-brand-background-active: #ffe668;
  --pds-color-button-brand-background-default: #ddbd16;
  --pds-color-button-brand-background-hover: #ffdc28;
  --pds-color-button-brand-border-active: #ffe668;
  --pds-color-button-brand-border-default: #ddbd16;
  --pds-color-button-brand-border-hover: #ffdc28;
  --pds-color-button-brand-foreground-active: #121219;
  --pds-color-button-brand-foreground-default: #121219;
  --pds-color-button-brand-foreground-hover: #121219;
  --pds-color-button-brand-secondary-background-active: #1a1b20;
  --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
  --pds-color-button-brand-secondary-background-hover: #20232c;
  --pds-color-button-brand-secondary-border-active: #20232c;
  --pds-color-button-brand-secondary-border-default: #6d6d78;
  --pds-color-button-brand-secondary-border-hover: #ffffff;
  --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
  --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
  --pds-color-button-critical-background-active: #e00000;
  --pds-color-button-critical-background-default: var(--pds-color-status-critical-utility);
  --pds-color-button-critical-background-hover: #c70000;
  --pds-color-button-critical-border-active: #e00000;
  --pds-color-button-critical-border-default: var(--pds-color-status-critical-utility);
  --pds-color-button-critical-border-hover: #c70000;
  --pds-color-button-critical-foreground-active: #ffffff;
  --pds-color-button-critical-foreground-default: #ffffff;
  --pds-color-button-critical-foreground-hover: #ffffff;
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
  --pds-color-button-navbar-foreground-default: #ffffff;
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
  --pds-color-button-primary-background-active: #8a78de;
  --pds-color-button-primary-background-default: #42318d;
  --pds-color-button-primary-background-hover: #745dd8;
  --pds-color-button-primary-border-active: #8a78de;
  --pds-color-button-primary-border-default: #42318d;
  --pds-color-button-primary-border-hover: #745dd8;
  --pds-color-button-primary-foreground-active: #ffffff;
  --pds-color-button-primary-foreground-default: #ffffff;
  --pds-color-button-primary-foreground-hover: #ffffff;
  --pds-color-button-secondary-background-active: #1a1b20;
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
  --pds-color-button-secondary-background-hover: #20232c;
  --pds-color-button-secondary-border-active: #20232c;
  --pds-color-button-secondary-border-default: #6d6d78;
  --pds-color-button-secondary-border-hover: #ffffff;
  --pds-color-button-secondary-foreground-active: #e7e7eb;
  --pds-color-button-secondary-foreground-default: #e7e7eb;
  --pds-color-button-secondary-foreground-hover: #ffffff;
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
  --pds-color-button-subtle-foreground-active: #745dd8;
  --pds-color-button-subtle-foreground-default: #cbc2f0;
  --pds-color-button-subtle-foreground-hover: #745dd8;
  --pds-color-card-background: #1f2026;
  --pds-color-code-inline-background: #1a1b20;
  --pds-color-code-inline-border: #20232c;
  --pds-color-code-inline-text: #ffffff;
  --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
  --pds-color-dashboard-nav-background-admin: #252038;
  --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
  --pds-color-dashboard-nav-item-background-hover: #6d6d78;
  --pds-color-dashboard-nav-item-background-hover-admin: #121219;
  --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
  --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
  --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
  --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
  --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
  --pds-color-dropdown-background: #20232c;
  --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
  --pds-color-dropdown-foreground: var(--pds-color-fg-default);
  --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
  --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
  --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
  --pds-color-dropdown-top-border: rgba(0, 0, 0, 0);
  --pds-color-expansion-panel-hover: #20232c;
  --pds-color-expansion-panel-open: #20232c;
  --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
  --pds-color-fg-default: #ffffff;
  --pds-color-fg-default-secondary: #e7e7eb;
  --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
  --pds-color-fg-info: var(--pds-color-status-info-foreground);
  --pds-color-fg-reverse: #121219;
  --pds-color-fg-success: var(--pds-color-status-success-foreground);
  --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
  --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
  --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
  --pds-color-icon-button-reverse-background-active: #6a6e7a;
  --pds-color-icon-button-reverse-background-hover: #474954;
  --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
  --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
  --pds-color-input-checkbox-checked-foreground: #ffffff;
  --pds-color-input-file-upload-button-background-default: #2f323d;
  --pds-color-input-file-upload-button-background-hover: #3d3c4d;
  --pds-color-input-switch-icon: #ffffff;
  --pds-color-interactive-background-active: #2f323d;
  --pds-color-interactive-background-hover: #20232c;
  --pds-color-interactive-focus: #4888fe;
  --pds-color-interactive-link-active: #836fdc;
  --pds-color-interactive-link-default: #4888fe;
  --pds-color-interactive-link-hover: #9584e1;
  --pds-color-interactive-link-visited: #9584e1;
  --pds-color-interactive-reverse-focus: #0f62fe;
  --pds-color-interactive-reverse-link-active: #3017a1;
  --pds-color-interactive-reverse-link-default: #0f62fe;
  --pds-color-interactive-reverse-link-hover: #4f32ce;
  --pds-color-interactive-reverse-link-visited: #4f32ce;
  --pds-color-nav-item-default-foreground-active: #9786e2;
  --pds-color-nav-item-default-foreground-hover: #9786e2;
  --pds-color-nav-item-default-foreground-trigger: #6d6d78;
  --pds-color-nav-item-reverse-foreground-active: #42318d;
  --pds-color-nav-item-reverse-foreground-hover: #42318d;
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
  --pds-color-pagination-background-active: #2c205e;
  --pds-color-pagination-background-hover: #42318d;
  --pds-color-pagination-foreground-active: #eeebfa;
  --pds-color-pagination-foreground-hover: #ffffff;
  --pds-color-panel-overlay-background: #1f2026;
  --pds-color-panel-raised-background: #1f2026;
  --pds-color-panel-sunken-background: #121219;
  --pds-color-partner-bitbucket: #004dc0;
  --pds-color-partner-drupal: #009cde;
  --pds-color-partner-gatsby: #663399;
  --pds-color-partner-github: #2da44e;
  --pds-color-partner-gitlab: #fc6d26;
  --pds-color-partner-google: #4285f4;
  --pds-color-partner-nextjs: #ffffff;
  --pds-color-partner-wordpress: #0073aa;
  --pds-color-segmented-button-background-active: #121219;
  --pds-color-segmented-button-background-default: #1a1b20;
  --pds-color-segmented-button-background-hover: #121219;
  --pds-color-segmented-button-border-active: #9786e2;
  --pds-color-segmented-button-foreground-active: #9786e2;
  --pds-color-segmented-button-foreground-default: #e7e7eb;
  --pds-color-segmented-button-foreground-hover: #9786e2;
  --pds-color-social-rss: #f3763a;
  --pds-color-status-critical-background: #570000;
  --pds-color-status-critical-foreground: #f9634c;
  --pds-color-status-critical-utility: #a70000;
  --pds-color-status-discovery-background: #321068;
  --pds-color-status-discovery-foreground: #c08ffc;
  --pds-color-status-discovery-utility: #a25ef6;
  --pds-color-status-info-background: #002651;
  --pds-color-status-info-foreground: #4096f3;
  --pds-color-status-info-utility: #005cc8;
  --pds-color-status-neutral-background: #6d6d78;
  --pds-color-status-neutral-foreground: #ffffff;
  --pds-color-status-neutral-utility: #e7e7eb;
  --pds-color-status-success-background: #002f07;
  --pds-color-status-success-foreground: #0dab25;
  --pds-color-status-success-utility: #00710f;
  --pds-color-status-warning-background: #481801;
  --pds-color-status-warning-foreground: #ffa23b;
  --pds-color-status-warning-utility: #bd5b00;
  --pds-color-text-default: var(--pds-color-fg-default);
  --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
  --pds-color-text-reverse: var(--pds-color-fg-reverse);
  --pds-color-tile-background: #1f2026;
  --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
  --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
}