We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Describe the bug I'm in a project using Primer CSS and it is generating the following code:
:root,[data-color-mode=light][data-light-theme=light],[data-color-mode=dark][data-dark-theme=light] { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } :root::selection { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=light][data-light-theme=light]::selection { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=dark][data-dark-theme=light]::selection { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=light][data-light-theme=light] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=light][data-light-theme=light] ::backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=dark][data-dark-theme=light] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=dark][data-dark-theme=light] ::backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } @media (prefers-color-scheme: light) { [data-color-mode=auto][data-light-theme=light] { --color-canvas-default-transparent:rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=auto][data-light-theme=light]::selection { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=auto][data-light-theme=light] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=auto][data-light-theme=light] ::backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } } @media (prefers-color-scheme: dark) { [data-color-mode=auto][data-dark-theme=light] { --color-canvas-default-transparent:rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=auto][data-dark-theme=light]::selection { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=auto][data-light-theme=light] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } [data-color-mode=auto][data-light-theme=light] ::backdrop { --color-canvas-default-transparent: rgba(255,255,255,0); --color-prettylights-syntax-comment: #57606a; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #6639ba; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-canvas-default: #fff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-neutral-muted: rgba(175,184,193,.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-danger-fg: #d1242f } } [data-color-mode=light][data-light-theme=dark],[data-color-mode=dark][data-dark-theme=dark] { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=light][data-light-theme=dark]::selection { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=dark][data-dark-theme=dark]::selection { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } ::-webkit-backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } ::backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=light][data-light-theme=dark] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=light][data-light-theme=dark] ::backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=dark][data-dark-theme=dark] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=dark][data-dark-theme=dark] ::backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } @media (prefers-color-scheme: light) { [data-color-mode=auto][data-light-theme=dark] { --color-canvas-default-transparent:rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=auto][data-light-theme=dark]::selection { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=auto][data-light-theme=dark] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=auto][data-light-theme=dark] ::backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } } @media (prefers-color-scheme: dark) { [data-color-mode=auto][data-dark-theme=dark] { --color-canvas-default-transparent:rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=auto][data-dark-theme=dark]::selection { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=auto][data-light-theme=dark] ::-webkit-backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } [data-color-mode=auto][data-light-theme=dark] ::backdrop { --color-canvas-default-transparent: rgba(13,17,23,0); --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #e6edf3; --color-fg-muted: #848d97; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,.4); --color-accent-fg: #2f81f7; --color-accent-emphasis: #1f6feb; --color-danger-fg: #f85149 } }
It looks like this is coming from this file: https://github.com/primer/css/blob/main/src/support/mixins/color-modes.scss
To Reproduce Steps to reproduce the behavior: We are including Primer like so:
@import "@primer/css/color-modes/themes/light.scss"; @import "@primer/css/color-modes/themes/dark.scss"; @import "@primer/css/markdown/index.scss";
The text was updated successfully, but these errors were encountered:
TylerJDev
No branches or pull requests
Describe the bug
I'm in a project using Primer CSS and it is generating the following code:
It looks like this is coming from this file: https://github.com/primer/css/blob/main/src/support/mixins/color-modes.scss
To Reproduce
Steps to reproduce the behavior:
We are including Primer like so:
The text was updated successfully, but these errors were encountered: