Created
July 26, 2022 13:13
-
-
Save GenesisCoast/f05da3b1b0b037219592ad7945bb17a0 to your computer and use it in GitHub Desktop.
Built-In variable styles for Azure DevOps. Will change with the Azure DevOps theme.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --palette-primary-darken-6: rgba(0, 103, 181, 1); | |
| --palette-primary-darken-10: rgba(0, 91, 161, 1); | |
| --palette-primary-darkened-6: 0, 103, 181; | |
| --palette-primary-darkened-10: 0, 91, 161; | |
| --palette-primary-shade-30: 0, 69, 120; | |
| --palette-primary-shade-20: 0, 90, 158; | |
| --palette-primary-shade-10: 16, 110, 190; | |
| --palette-primary: 0, 120, 212; | |
| --palette-primary-tint-10: 43, 136, 216; | |
| --palette-primary-tint-20: 199, 224, 244; | |
| --palette-primary-tint-30: 222, 236, 249; | |
| --palette-primary-tint-40: 239, 246, 252; | |
| --palette-neutral-100: 0, 0, 0; | |
| --palette-neutral-80: 51, 51, 51; | |
| --palette-neutral-70: 76, 76, 76; | |
| --palette-neutral-60: 102, 102, 102; | |
| --palette-neutral-30: 166, 166, 166; | |
| --palette-neutral-20: 200, 200, 200; | |
| --palette-neutral-10: 218, 218, 218; | |
| --palette-neutral-8: 234, 234, 234; | |
| --palette-neutral-6: 239, 239, 239; | |
| --palette-neutral-4: 244, 244, 244; | |
| --palette-neutral-2: 248, 248, 248; | |
| --palette-neutral-0: 255, 255, 255; | |
| --palette-error: rgba(232, 17, 35, 1); | |
| --palette-error-6: rgba(203, 15, 31, 1); | |
| --palette-error-10: rgba(184, 14, 28, 1); | |
| --palette-black-alpha-0: rgba(var(--palette-neutral-100), 0); | |
| --palette-black-alpha-2: rgba(var(--palette-neutral-100), 0.02); | |
| --palette-black-alpha-4: rgba(var(--palette-neutral-100), 0.04); | |
| --palette-black-alpha-6: rgba(var(--palette-neutral-100), 0.06); | |
| --palette-black-alpha-8: rgba(var(--palette-neutral-100), 0.08); | |
| --palette-black-alpha-10: rgba(var(--palette-neutral-100), 0.10); | |
| --palette-black-alpha-20: rgba(var(--palette-neutral-100), 0.20); | |
| --palette-black-alpha-30: rgba(var(--palette-neutral-100), 0.30); | |
| --palette-black-alpha-60: rgba(var(--palette-neutral-100), 0.60); | |
| --palette-black-alpha-70: rgba(var(--palette-neutral-100), 0.70); | |
| --palette-black-alpha-80: rgba(var(--palette-neutral-100), 0.80); | |
| --palette-black-alpha-100: rgba(var(--palette-neutral-100), 1); | |
| --palette-accent1-light: 249, 235, 235; | |
| --palette-accent1: 218, 10, 0; | |
| --palette-accent1-dark: 168, 0, 0; | |
| --palette-accent2-light: 223, 246, 221; | |
| --palette-accent2: 186, 216, 10; | |
| --palette-accent2-dark: 16, 124, 16; | |
| --palette-accent3-light: 251, 242, 236; | |
| --palette-accent3: 214, 127, 60; | |
| --palette-accent3-dark: 171, 102, 48; | |
| --background-color: rgba(var(--palette-neutral-0), 1); | |
| --communication-foreground: rgba(var(--palette-primary-shade-20), 1); | |
| --communication-background: rgba(var(--palette-primary), 1); | |
| --status-info-foreground: rgba(0, 120, 212, 1); | |
| --status-info-background: rgba(0, 120, 212, 1); | |
| --status-error-foreground: rgba(205, 74, 69, 1); | |
| --status-error-background: rgba(var(--palette-accent1-light), 1); | |
| --status-error-text: rgba(var(--palette-accent1), 1); | |
| --status-error-strong: rgba(var(--palette-accent1-dark), 1); | |
| --status-success-foreground: rgba(var(--palette-accent2-dark), 1); | |
| --status-success-background: rgba(var(--palette-accent2-light), 1); | |
| --status-success-text: rgba(127, 184, 0, 1); | |
| --status-warning-icon-foreground: rgba(177, 133, 37, 1); | |
| --status-warning-foreground: rgba(214, 127, 60, 1); | |
| --status-warning-background: rgba(var(--palette-accent3-light), 1); | |
| --status-warning-text: rgba(184, 94, 6, 1); | |
| --text-primary-color: rgba(var(--palette-neutral-100), .9); | |
| --text-secondary-color: rgba(var(--palette-neutral-100), .55); | |
| --text-disabled-color: rgba(var(--palette-neutral-100), .38); | |
| --text-on-communication-background: var(--background-color); | |
| --border-subtle-color: rgba(var(--palette-neutral-100), .08); | |
| --callout-background-color: var(--background-color); | |
| --callout-filtered-background-color: rgba(var(--palette-neutral-0), 0.86); | |
| --callout-shadow-color: rgba(0, 0, 0, .132); | |
| --callout-shadow-secondary-color: rgba(0, 0, 0, .108); | |
| --panel-shadow-color: rgba(0, 0, 0, .22); | |
| --panel-shadow-secondary-color: rgba(0, 0, 0, .18); | |
| --focus-pulse-max-color: rgba(var(--palette-primary), 0.23); | |
| --focus-pulse-min-color: rgba(var(--palette-primary), 0.15); | |
| --focus-border-color: rgba(var(--palette-primary), 1); | |
| --third-party-icon-filter: none; | |
| --build-output-error-color: rgb(233, 45, 61); | |
| --diff-color-original: rgba(172, 0, 0, 0.1); | |
| --diff-color-modified: rgba(51, 153, 51, 0.1); | |
| --component-label-default-color: rgba(var(--palette-neutral-6), 1); | |
| --component-label-default-color-hover: rgba(var(--palette-neutral-10), 1); | |
| --component-grid-row-hover-color: rgba(var(--palette-neutral-2), 1); | |
| --component-grid-selected-row-color: rgba(var(--palette-primary-tint-30), 1); | |
| --component-grid-focus-border-color: rgba(var(--palette-primary), 1); | |
| --component-grid-link-selected-row-color: rgba(var(--palette-primary-shade-20), 1); | |
| --component-grid-link-hover-color: rgba(var(--palette-primary-shade-20), 1); | |
| --component-grid-action-hover-color: rgba(var(--palette-neutral-8), 1); | |
| --component-grid-action-selected-cell-hover-color: rgba(var(--palette-primary-tint-30), 1); | |
| --component-grid-cell-bottom-border-color: rgba(var(--palette-neutral-8), 1); | |
| --component-grid-drag-source-color: rgba(var(--palette-neutral-0), 0.40); | |
| --search-match-background: rgba(255, 255, 0, 0.6); | |
| --search-selected-match-background: rgba(245, 139, 31, 0.35); | |
| --icon-folder-color: #dcb67a; | |
| --component-errorBoundary-border-color: rgba(var(--palette-accent1), 1); | |
| --component-errorBoundary-background-color: rgba(var(--palette-accent1-light), 1); | |
| --nav-header-background: var(--background-color); | |
| --nav-header-item-hover-background: rgba(var(--palette-neutral-100), 0.02); | |
| --nav-header-active-item-background: rgba(var(--palette-neutral-100), 0.08); | |
| --nav-header-text-primary-color: var(--text-primary-color); | |
| --nav-header-text-secondary-color: var(--text-secondary-color); | |
| --nav-header-text-disabled-color: var(--text-disabled-color); | |
| --nav-header-product-color: rgba(var(--palette-primary), 1); | |
| --nav-vertical-background-color: rgba(var(--palette-neutral-8), 1); | |
| --nav-vertical-item-hover-background: rgba(var(--palette-neutral-100), 0.04); | |
| --nav-vertical-active-group-background: rgba(var(--palette-neutral-100), 0.06); | |
| --nav-vertical-active-item-background: rgba(var(--palette-neutral-100), 0.12); | |
| --nav-vertical-text-primary-color: var(--text-primary-color); | |
| --nav-vertical-text-secondary-color: var(--text-secondary-color); | |
| --component-menu-selected-item-background: rgba(var(--palette-neutral-4), 1); | |
| --component-htmlEditor-background-color: var(--background-color); | |
| --component-htmlEditor-foreground-color: var(--text-primary-color); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment