/* HTML Global Comment */ .token:is(.comment) { opacity: 0.55; } /* HTML Tag, DOCTYPE Tag, RegEx */ .token:is(.tag,.doctype-tag,.regex) { color: hsl(359,90%,48%); } :host(.color-scheme-dark) .token:is(.tag,.doctype-tag,.regex) { color: hsl(359,90%,68%); } /* Global Punctuation */ .token:is(.punctuation) { color: var(--color); } .token:is(.punctuation), .language-html :is(.language-css,.language-javascript) .token:is(.punctuation) { opacity: 0.7; } .token:is(.tag,.doctype) .token:is(.punctuation) { opacity: 0.5; } /* HTML Attribute Name, CSS Selector, Global Number, Global Boolean, DOCTYPE Name */ .token:is(.attr-name,.selector,.number,.boolean), .token.doctype .token.name { color: hsl(35,80%,36%); } :host(.color-scheme-dark) .token:is(.attr-name,.selector,.number,.boolean), :host(.color-scheme-dark) .token.doctype .token.name { color: hsl(35,80%,68%); } /* CSS Property */ .token:is(.property) { color: hsl(180,37%,37%); } :host(.color-scheme-dark) .token:is(.property) { color: hsl(180,37%,68%); } /* HTML Attribute Value, Global String, HTML Attribute Value Punctuation */ .token:is(.attr-value,.string), .token:is(.attr-value) .token.punctuation:not(.attr-equals) { color: hsl(117,47%,36%); } .token:is(.attr-value) .token.punctuation:not(.attr-equals) { opacity: 1; } :host(.color-scheme-dark) .token:is(.attr-value,.string), :host(.color-scheme-dark) .token:is(.attr-value) .token.punctuation:not(.attr-equals) { color: hsl(117,47%,68%); } /* CSS Important */ .token:is(.important) { color: hsl(58,80%,27%); } :host(.color-scheme-dark) .token:is(.important) { color: hsl(58,80%,68%); } /* CSS Function, JavaScript Function */ .token:is(.function) { color: hsl(208,78%,45%); } :host(.color-scheme-dark) .token:is(.function) { color: hsl(208,78%,68%); } /* Global Class Name */ .token:is(.class-name) { color: hsl(45,80%,27%); } :host(.color-scheme-dark) .token:is(.class-name) { color: hsl(45,80%,68%); } /* Global Operator */ .token:is(.operator) { color: hsl(175,54%,33%); } :host(.color-scheme-dark) .token:is(.operator) { color: hsl(175,54%,68%); } /* CSS Rule, JavaScript Keyword */ .token:is(.rule,.keyword) { color: hsl(273,75%,50%); } :host(.color-scheme-dark) .token:is(.rule,.keyword) { color: hsl(273,75%,78%); }