@aurodesignsystem/auro-hyperlink
Version:
auro-hyperlink HTML custom element
3 lines (2 loc) • 5.74 kB
JavaScript
import { css } from 'lit';
export default css`:host([type=nav]:not([ondark])) a{color:var(--ds-auro-hyperlink-nav-default-color-default);background-color:var(--ds-auro-hyperlink-nav-default-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-default-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-default-border-color-default)}:host([type=nav]:not([ondark])) a:visited{color:var(--ds-auro-hyperlink-nav-visited-color-default);background-color:var(--ds-auro-hyperlink-nav-visited-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-visited-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-visited-border-color-default)}:host([type=nav]:not([ondark])) a:focus-visible{color:var(--ds-auro-hyperlink-nav-focus-color-default);background-color:var(--ds-auro-hyperlink-nav-focus-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-default)}:host([type=nav]:not([ondark])) a:hover{color:var(--ds-auro-hyperlink-nav-hover-color-default);background-color:var(--ds-auro-hyperlink-nav-hover-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-hover-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-hover-border-color-default)}:host([type=nav]:not([ondark])) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-default)}:host([type=nav][ondark]) a{color:var(--ds-auro-hyperlink-nav-default-color-inverse);background-color:var(--ds-auro-hyperlink-nav-default-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-default-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-default-border-color-inverse)}:host([type=nav][ondark]) a:visited{color:var(--ds-auro-hyperlink-nav-visited-color-inverse);background-color:var(--ds-auro-hyperlink-nav-visited-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-visited-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-visited-border-color-inverse)}:host([type=nav][ondark]) a:focus-visible{color:var(--ds-auro-hyperlink-nav-focus-color-inverse);background-color:var(--ds-auro-hyperlink-nav-focus-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-inverse)}:host([type=nav][ondark]) a:hover{color:var(--ds-auro-hyperlink-nav-hover-color-inverse);background-color:var(--ds-auro-hyperlink-nav-hover-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-hover-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-hover-border-color-inverse)}:host([type=nav][ondark]) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-inverse)}:host(:not([type=nav]):not([ondark])) a{color:var(--ds-auro-hyperlink-default-color-default);background-color:var(--ds-auro-hyperlink-default-container-color-default);outline-color:var(--ds-auro-hyperlink-default-outline-color-default);border-color:var(--ds-auro-hyperlink-default-border-color-default)}:host(:not([type=nav]):not([ondark])) a:visited{color:var(--ds-auro-hyperlink-visited-color-default);background-color:var(--ds-auro-hyperlink-visited-container-color-default);outline-color:var(--ds-auro-hyperlink-visited-outline-color-default);border-color:var(--ds-auro-hyperlink-visited-border-color-default)}:host(:not([type=nav]):not([ondark])) a:focus-visible{color:var(--ds-auro-hyperlink-focus-color-default);background-color:var(--ds-auro-hyperlink-focus-container-color-default);outline-color:var(--ds-auro-hyperlink-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-focus-border-color-default)}:host(:not([type=nav]):not([ondark])) a:hover{color:var(--ds-auro-hyperlink-hover-color-default);background-color:var(--ds-auro-hyperlink-hover-container-color-default);outline-color:var(--ds-auro-hyperlink-hover-outline-color-default);border-color:var(--ds-auro-hyperlink-hover-border-color-default)}:host(:not([type=nav]):not([ondark])) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-focus-border-color-default)}:host(:not([type=nav])[ondark]) a{color:var(--ds-auro-hyperlink-default-color-inverse);background-color:var(--ds-auro-hyperlink-default-container-color-inverse);outline-color:var(--ds-auro-hyperlink-default-outline-color-inverse);border-color:var(--ds-auro-hyperlink-default-border-color-inverse)}:host(:not([type=nav])[ondark]) a:visited{color:var(--ds-auro-hyperlink-visited-color-inverse);background-color:var(--ds-auro-hyperlink-visited-container-color-inverse);outline-color:var(--ds-auro-hyperlink-visited-outline-color-inverse);border-color:var(--ds-auro-hyperlink-visited-border-color-inverse)}:host(:not([type=nav])[ondark]) a:focus-visible{color:var(--ds-auro-hyperlink-focus-color-inverse);background-color:var(--ds-auro-hyperlink-focus-container-color-inverse);outline-color:var(--ds-auro-hyperlink-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-focus-border-color-inverse)}:host(:not([type=nav])[ondark]) a:hover{color:var(--ds-auro-hyperlink-hover-color-inverse);background-color:var(--ds-auro-hyperlink-hover-container-color-inverse);outline-color:var(--ds-auro-hyperlink-hover-outline-color-inverse);border-color:var(--ds-auro-hyperlink-hover-border-color-inverse)}:host(:not([type=nav])[ondark]) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-focus-border-color-inverse)}`;