@spectrum-css/link
Version:
The Spectrum CSS link component
71 lines (69 loc) • 3.34 kB
CSS
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
@media (forced-colors: active) {
.spectrum-Link {
--highcontrast-link-text-color: LinkText;
}
}
.spectrum-Link--secondary {
--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
}
.spectrum-Link {
background-color: initial;
-webkit-text-decoration-skip: objects;
text-decoration-skip: objects;
-webkit-text-decoration: underline;
text-decoration: underline;
transition: color var(--mod-link-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
outline: none;
cursor: pointer;
color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
}
.spectrum-Link:active {
--mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
}
.spectrum-Link:focus-visible {
--mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-style: double;
text-decoration-color: inherit;
}
.spectrum-Link--quiet {
-webkit-text-decoration: none;
text-decoration: none;
}
@media (hover: hover) {
.spectrum-Link:hover {
--mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
}
.spectrum-Link--quiet:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
}
.spectrum-Link--staticWhite {
--mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white));
}
.spectrum-Link--staticBlack {
--mod-link-text-color: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black));
}