loads of repeated CSS variables

**Describe the bug**
I'm in a project using Primer CSS and it is generating the following code:

```css
: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: 
```css
@import "@primer/css/color-modes/themes/light.scss";
@import "@primer/css/color-modes/themes/dark.scss";
@import "@primer/css/markdown/index.scss";
```


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

loads of repeated CSS variables #2729

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

loads of repeated CSS variables #2729

Description

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions