@pantheon-systems/pds-design-tokens
Version:
Design Tokens for the Pantheon Design System
352 lines (350 loc) • 20.1 kB
CSS
/**
*
* Pantheon Systems
*
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
* !! DO NOT EDIT THIS FILE DIRECTLY !!
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*
* This file has been generated automatically.
*/
:root, [data-theme="light"] {
--pds-color-badge-indicator-brand-background: #4f32ce;
--pds-color-badge-indicator-brand-foreground: #ffffff;
--pds-color-badge-indicator-critical-background: #bc1c11;
--pds-color-badge-indicator-critical-foreground: #ffffff;
--pds-color-badge-indicator-default-background: #23232d;
--pds-color-badge-indicator-default-foreground: #ffffff;
--pds-color-badge-indicator-diamond-background: #d7edff;
--pds-color-badge-indicator-diamond-foreground: #0766c5;
--pds-color-badge-indicator-gold-background: #ffe668;
--pds-color-badge-indicator-gold-foreground: #726009;
--pds-color-badge-indicator-info-background: #0875e1;
--pds-color-badge-indicator-info-foreground: #ffffff;
--pds-color-badge-indicator-neutral-background: #6a6e7a;
--pds-color-badge-indicator-neutral-foreground: #ffffff;
--pds-color-badge-indicator-platinum-background: #e5e0f8;
--pds-color-badge-indicator-platinum-foreground: #4f32ce;
--pds-color-badge-indicator-silver-background: #c3c5c9;
--pds-color-badge-indicator-silver-foreground: #23232d;
--pds-color-badge-indicator-success-background: #217a37;
--pds-color-badge-indicator-success-foreground: #ffffff;
--pds-color-badge-indicator-warning-background: #b06300;
--pds-color-badge-indicator-warning-foreground: #ffffff;
--pds-color-banner-critical-background: #de2e21;
--pds-color-banner-critical-foreground: #ffffff;
--pds-color-banner-info-background: #0875e1;
--pds-color-banner-info-foreground: #ffffff;
--pds-color-banner-warning-background: #ffa126;
--pds-color-banner-warning-foreground: #23232d;
--pds-color-bg-critical: var(--pds-color-status-critical-background);
--pds-color-bg-default: #ffffff;
--pds-color-bg-default-secondary: #f4f4f4;
--pds-color-bg-discovery: var(--pds-color-status-discovery-background);
--pds-color-bg-info: var(--pds-color-status-info-background);
--pds-color-bg-reverse: #23232d;
--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: #e5e0f8;
--pds-color-border-critical: var(--pds-color-status-critical-foreground);
--pds-color-border-default: #e3e4e5;
--pds-color-border-input: #c3c5c9;
--pds-color-border-separator: #c3c5c9;
--pds-color-border-success: var(--pds-color-status-success-foreground);
--pds-color-brand-accent-100: #ffe5f6;
--pds-color-brand-accent-200: #ff99dc;
--pds-color-brand-accent-300: #ff4cc3;
--pds-color-brand-accent-400: #de0093;
--pds-color-brand-accent-500: #9a0066;
--pds-color-brand-accent-600: #560039;
--pds-color-brand-accent-default: #de0093;
--pds-color-brand-primary-100: #f4f3fc;
--pds-color-brand-primary-200: #e5e0f8;
--pds-color-brand-primary-300: #cbc2f0;
--pds-color-brand-primary-400: #4f32ce;
--pds-color-brand-primary-500: #3017a1;
--pds-color-brand-primary-600: #12026f;
--pds-color-brand-primary-default: #4f32ce;
--pds-color-brand-secondary-100: #fffbe9;
--pds-color-brand-secondary-200: #fff1a9;
--pds-color-brand-secondary-300: #ffe668;
--pds-color-brand-secondary-400: #ffdc28;
--pds-color-brand-secondary-500: #ddbd16;
--pds-color-brand-secondary-600: #726009;
--pds-color-brand-secondary-default: #ffdc28;
--pds-color-button-brand-background-active: #a88f10;
--pds-color-button-brand-background-default: #ffdc28;
--pds-color-button-brand-background-hover: #ddbd16;
--pds-color-button-brand-border-active: #a88f10;
--pds-color-button-brand-border-default: #ffdc28;
--pds-color-button-brand-border-hover: #ddbd16;
--pds-color-button-brand-foreground-active: #23232d;
--pds-color-button-brand-foreground-default: #23232d;
--pds-color-button-brand-foreground-hover: #23232d;
--pds-color-button-brand-secondary-background-active: #e3e4e5;
--pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
--pds-color-button-brand-secondary-background-hover: #f4f4f4;
--pds-color-button-brand-secondary-border-active: #23232d;
--pds-color-button-brand-secondary-border-default: #6a6e7a;
--pds-color-button-brand-secondary-border-hover: #23232d;
--pds-color-button-brand-secondary-foreground-active: #23232d;
--pds-color-button-brand-secondary-foreground-default: #23232d;
--pds-color-button-brand-secondary-foreground-hover: #23232d;
--pds-color-button-critical-background-active: #790b03;
--pds-color-button-critical-background-default: var(--pds-color-status-critical-foreground);
--pds-color-button-critical-background-hover: #9e140b;
--pds-color-button-critical-border-active: #790b03;
--pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
--pds-color-button-critical-border-hover: #9e140b;
--pds-color-button-critical-foreground-active: #ffffff;
--pds-color-button-critical-foreground-default: #ffffff;
--pds-color-button-critical-foreground-hover: #ffffff;
--pds-color-button-critical-secondary-background-active: #ffdcd8;
--pds-color-button-critical-secondary-background-default: rgba(0, 0, 0, 0);
--pds-color-button-critical-secondary-background-hover: var(--pds-color-status-critical-background);
--pds-color-button-critical-secondary-border-active: var(--pds-color-button-critical-border-active);
--pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
--pds-color-button-critical-secondary-border-hover: var(--pds-color-button-critical-border-hover);
--pds-color-button-critical-secondary-foreground-active: var(--pds-color-status-critical-foreground);
--pds-color-button-critical-secondary-foreground-default: var(--pds-color-status-critical-foreground);
--pds-color-button-critical-secondary-foreground-hover: var(--pds-color-status-critical-foreground);
--pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
--pds-color-button-navbar-foreground-default: var(--pds-color-fg-default);
--pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
--pds-color-button-primary-background-active: #12026f;
--pds-color-button-primary-background-default: #4f32ce;
--pds-color-button-primary-background-hover: #3017a1;
--pds-color-button-primary-border-active: #12026f;
--pds-color-button-primary-border-default: #4f32ce;
--pds-color-button-primary-border-hover: #3017a1;
--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: #f4f3fc;
--pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
--pds-color-button-secondary-background-hover: #f4f3fc;
--pds-color-button-secondary-border-active: #3017a1;
--pds-color-button-secondary-border-default: #4f32ce;
--pds-color-button-secondary-border-hover: #4f32ce;
--pds-color-button-secondary-foreground-active: #3017a1;
--pds-color-button-secondary-foreground-default: #4f32ce;
--pds-color-button-secondary-foreground-hover: #4f32ce;
--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: #12026f;
--pds-color-button-subtle-foreground-default: #4f32ce;
--pds-color-button-subtle-foreground-hover: #3017a1;
--pds-color-card-background: #ffffff;
--pds-color-category-ai-background: #f4f3fc;
--pds-color-category-ai-foreground: #4f32ce;
--pds-color-category-ai-utility: #cbc2f0;
--pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
--pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
--pds-color-code-block-dark-highlight: #474954;
--pds-color-code-block-dark-line-prefix: #9699a1;
--pds-color-code-block-light-background: #eff0f0;
--pds-color-code-block-light-foreground: #3b3d45;
--pds-color-code-block-light-highlight: #dedfe0;
--pds-color-code-block-light-line-prefix: #686d78;
--pds-color-code-inline-background: #f4f3fc;
--pds-color-code-inline-border: #e5e0f8;
--pds-color-code-inline-text: #000000;
--pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
--pds-color-dashboard-nav-background-admin: #edecf8;
--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: #e3e4e5;
--pds-color-dashboard-nav-item-background-hover-admin: #ffffff;
--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-datavis-1: #003f5c;
--pds-color-datavis-2: #006779;
--pds-color-datavis-3: #008d6f;
--pds-color-datavis-4: #62ad43;
--pds-color-datavis-5: #ddbd16;
--pds-color-datepicker-accent-foreground: #4f32ce;
--pds-color-datepicker-range-background: #f4f3fc;
--pds-color-datepicker-range-foreground: #000000;
--pds-color-datepicker-selected-background: #4f32ce;
--pds-color-datepicker-selected-foreground: #ffffff;
--pds-color-dropdown-background: var(--pds-color-bg-default);
--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: #dfdfdf;
--pds-color-expansion-panel-hover: #f4f4f4;
--pds-color-expansion-panel-open: #f4f4f4;
--pds-color-fg-critical: var(--pds-color-status-critical-foreground);
--pds-color-fg-default: #23232d;
--pds-color-fg-default-secondary: #6a6e7a;
--pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
--pds-color-fg-info: var(--pds-color-status-info-foreground);
--pds-color-fg-reverse: #ffffff;
--pds-color-fg-success: var(--pds-color-status-success-foreground);
--pds-color-fg-warning: var(--pds-color-status-warning-foreground);
--pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
--pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
--pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
--pds-color-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
--pds-color-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
--pds-color-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
--pds-color-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
--pds-color-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
--pds-color-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
--pds-color-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
--pds-color-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
--pds-color-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
--pds-color-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
--pds-color-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
--pds-color-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
--pds-color-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
--pds-color-gradient-card-fog: linear-gradient(45deg, #EAD7D3 0%, #A2DCFF 100%);
--pds-color-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);
--pds-color-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
--pds-color-gradient-card-royal: linear-gradient(225deg, #3017A1 0%, #8A70FF 100%);
--pds-color-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
--pds-color-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
--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: #f4f4f4;
--pds-color-input-file-upload-button-background-hover: #e3e4e5;
--pds-color-input-switch-icon: #ffffff;
--pds-color-input-tag-background-active: var(--pds-color-status-discovery-background);
--pds-color-input-tag-background-default: #e3e4e5;
--pds-color-input-tag-background-hover: #c3c5c9;
--pds-color-input-tag-foreground-active: #4f32ce;
--pds-color-input-tag-foreground-default: var(--pds-color-fg-default);
--pds-color-input-tag-foreground-hover: var(--pds-color-fg-default);
--pds-color-input-tag-outline-active: #4f32ce;
--pds-color-interactive-background-active: #e3e4e5;
--pds-color-interactive-background-hover: #f4f4f4;
--pds-color-interactive-focus: #0f62fe;
--pds-color-interactive-link-active: #3017a1;
--pds-color-interactive-link-default: #0f62fe;
--pds-color-interactive-link-hover: #4f32ce;
--pds-color-interactive-link-visited: #4f32ce;
--pds-color-interactive-reverse-focus: #4888fe;
--pds-color-interactive-reverse-link-active: #836fdc;
--pds-color-interactive-reverse-link-default: #4888fe;
--pds-color-interactive-reverse-link-hover: #9584e1;
--pds-color-interactive-reverse-link-visited: #9584e1;
--pds-color-log-row-error-background-default: var(--pds-color-status-critical-background);
--pds-color-log-row-error-background-hover: #ffd9d7;
--pds-color-log-row-standard-background-default: var(--pds-color-fg-default);
--pds-color-log-row-standard-background-hover: var(--pds-color-fg-default-secondary);
--pds-color-log-row-warning-background-default: var(--pds-color-status-warning-background);
--pds-color-log-row-warning-background-hover: #ffdeb6;
--pds-color-nav-item-default-foreground-active: #4f32ce;
--pds-color-nav-item-default-foreground-hover: #4f32ce;
--pds-color-nav-item-default-foreground-trigger: #6a6e7a;
--pds-color-nav-item-reverse-foreground-active: #e5e0f8;
--pds-color-nav-item-reverse-foreground-hover: #e5e0f8;
--pds-color-neutral-000: #ffffff;
--pds-color-neutral-100: #f4f4f4;
--pds-color-neutral-200: #e3e4e5;
--pds-color-neutral-300: #c3c5c9;
--pds-color-neutral-400: #6a6e7a;
--pds-color-neutral-500: #23232d;
--pds-color-neutral-600: #000000;
--pds-color-overlay: rgba(9, 0, 48, 0.45);
--pds-color-pagination-background-active: #e5e0f8;
--pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
--pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
--pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
--pds-color-panel-overlay-background: #ffffff;
--pds-color-panel-raised-background: #ffffff;
--pds-color-panel-sunken-background: #f4f4f4;
--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: #000000;
--pds-color-partner-wordpress: #0073aa;
--pds-color-segmented-button-background-active: #f4f3fc;
--pds-color-segmented-button-background-default: #ffffff;
--pds-color-segmented-button-background-hover: #f4f3fc;
--pds-color-segmented-button-border-active: #4f32ce;
--pds-color-segmented-button-foreground-active: #4f32ce;
--pds-color-segmented-button-foreground-default: #6a6e7a;
--pds-color-segmented-button-foreground-hover: #4f32ce;
--pds-color-social-rss: #f26522;
--pds-color-status-critical-background: #ffefee;
--pds-color-status-critical-foreground: #bc1c11;
--pds-color-status-critical-utility: #de2e21;
--pds-color-status-discovery-background: #f0edff;
--pds-color-status-discovery-foreground: #8e74ff;
--pds-color-status-discovery-utility: #cfc5ff;
--pds-color-status-info-background: #d7edff;
--pds-color-status-info-foreground: #0875e1;
--pds-color-status-info-utility: #a6d2ff;
--pds-color-status-neutral-background: #c3c5c9;
--pds-color-status-neutral-foreground: #23232d;
--pds-color-status-neutral-utility: #6a6e7a;
--pds-color-status-success-background: #ebfff0;
--pds-color-status-success-foreground: #217a37;
--pds-color-status-success-utility: #43c463;
--pds-color-status-warning-background: #ffeed9;
--pds-color-status-warning-foreground: #b06300;
--pds-color-status-warning-utility: #ffa126;
--pds-color-tag-1-background: #ded8fa;
--pds-color-tag-1-foreground: #5c4fac;
--pds-color-tag-10-background: #d0dffc;
--pds-color-tag-10-foreground: #2254c5;
--pds-color-tag-11-background: #72cb9b;
--pds-color-tag-11-foreground: #264a37;
--pds-color-tag-12-background: #81c1dd;
--pds-color-tag-12-foreground: #234453;
--pds-color-tag-13-background: #689bf8;
--pds-color-tag-13-foreground: #163168;
--pds-color-tag-14-background: #9c90e9;
--pds-color-tag-14-foreground: #342c60;
--pds-color-tag-15-background: #e87e73;
--pds-color-tag-15-foreground: #50201b;
--pds-color-tag-16-background: #f1a76e;
--pds-color-tag-16-foreground: #68320f;
--pds-color-tag-17-background: #da81bc;
--pds-color-tag-17-foreground: #46253b;
--pds-color-tag-18-background: #efce60;
--pds-color-tag-18-foreground: #504012;
--pds-color-tag-19-background: #9fc65b;
--pds-color-tag-19-foreground: #3f4d27;
--pds-color-tag-2-background: #f8d7d3;
--pds-color-tag-2-foreground: #a0392c;
--pds-color-tag-20-background: #8790a0;
--pds-color-tag-20-foreground: #0e1e40;
--pds-color-tag-3-background: #f5e7a8;
--pds-color-tag-3-foreground: #7b611e;
--pds-color-tag-4-background: #f7d7ec;
--pds-color-tag-4-foreground: #894271;
--pds-color-tag-5-background: #d9f0af;
--pds-color-tag-5-foreground: #536a2b;
--pds-color-tag-6-background: #dddfe3;
--pds-color-tag-6-foreground: #47546d;
--pds-color-tag-7-background: #c6f1dc;
--pds-color-tag-7-foreground: #3e7256;
--pds-color-tag-8-background: #f9dfcb;
--pds-color-tag-8-foreground: #9a4e1c;
--pds-color-tag-9-background: #ceecf9;
--pds-color-tag-9-foreground: #366880;
--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: #ffffff;
--pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
--pds-elevation-overlay: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
--pds-elevation-raised: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
}