mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-20 07:54:14 +00:00
Compare commits
5 Commits
changelog
...
themes-pag
| Author | SHA1 | Date | |
|---|---|---|---|
|
2f30b1d7c1 | ||
|
|
3e869a3c36 | ||
|
|
be4d5c4c7e | ||
|
|
2f6554d6b9 | ||
|
|
ccd697e423 |
@@ -61,27 +61,19 @@
|
||||
<wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
|
||||
</div>
|
||||
|
||||
<div id="docs-toolbar" class="wa-cluster">
|
||||
<div id="docs-toolbar" class="wa-cluster wa-gap-xs">
|
||||
{# Desktop selectors #}
|
||||
<div class="wa-desktop-only wa-cluster wa-gap-xs">
|
||||
{% include "theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
|
||||
|
||||
<div id="github-buttons" class="wa-cluster wa-gap-xs">
|
||||
<wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon family="brands" name="github" label="GitHub"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
|
||||
<wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical"></wa-divider>
|
||||
{# Search #}
|
||||
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
Search
|
||||
<kbd slot="end" class="wa-desktop-only">/</kbd>
|
||||
</wa-button>
|
||||
|
||||
{# Login #}
|
||||
{% server "loginOrAvatar" %}
|
||||
@@ -92,7 +84,7 @@
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div class="wa-cluster wa-gap-xs" style="flex-wrap: nowrap;">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
{% include "theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" title="Press \ to toggle">
|
||||
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
|
||||
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
|
||||
<wa-option value="light">
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
{# Search #}
|
||||
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
Search
|
||||
<kbd slot="end" class="wa-desktop-only">/</kbd>
|
||||
</wa-button>
|
||||
|
||||
{# Getting started #}
|
||||
<h2>Getting Started</h2>
|
||||
<ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<wa-select appearance="filled" size="small" value="default" class="theme-selector">
|
||||
<wa-select appearance="filled" size="small" value="default" pill class="theme-selector">
|
||||
<wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
|
||||
|
||||
{# Free themes #}
|
||||
|
||||
@@ -73,33 +73,7 @@ wa-page > header {
|
||||
#docs-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-s);
|
||||
|
||||
.color-scheme-selector,
|
||||
.theme-selector {
|
||||
max-inline-size: 20ch;
|
||||
}
|
||||
|
||||
wa-divider:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#github-buttons {
|
||||
> wa-button {
|
||||
&::part(base) {
|
||||
color: var(--wa-color-on-quiet);
|
||||
background-color: var(--wa-color-fill-quiet);
|
||||
}
|
||||
> wa-icon {
|
||||
font-size: round(1.25em, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
> wa-tooltip {
|
||||
--wa-tooltip-arrow-size: 0;
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
#version-number {
|
||||
@@ -112,6 +86,14 @@ wa-page > header {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
wa-button#search-trigger {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar,
|
||||
@@ -260,12 +242,6 @@ wa-button.delete {
|
||||
}
|
||||
}
|
||||
|
||||
[slot='navigation-header'] {
|
||||
wa-select::part(listbox) {
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-close-button {
|
||||
display: none;
|
||||
}
|
||||
@@ -403,22 +379,6 @@ h1.title {
|
||||
}
|
||||
}
|
||||
|
||||
/* Search trigger */
|
||||
wa-button#search-trigger {
|
||||
&::part(base) {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
&::part(label) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
}
|
||||
|
||||
/* Search list pages */
|
||||
wa-page > main:has(> .search-list) {
|
||||
max-width: 120ch;
|
||||
@@ -670,7 +630,7 @@ wa-scroller:has(.component-table) {
|
||||
}
|
||||
|
||||
/** desktop */
|
||||
@media screen and not (max-width: 1180px) {
|
||||
@media screen and not (max-width: 768px) {
|
||||
/* Navigation sidebar */
|
||||
wa-page::part(navigation) {
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
|
||||
@@ -8,16 +8,16 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
|
||||
|
||||
Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
|
||||
|
||||
## 3.0.0-beta.2
|
||||
## Next
|
||||
|
||||
- Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover [pr:1111]
|
||||
- Added missing changelog entries for beta.1 [pr:1117]
|
||||
- Fixed a bug in `<wa-dropdown>` that prevented the menu from flipping/shifting to keep the menu in the viewport [pr:1122]
|
||||
- Fixed the themes page so it shows the correct palette and imports [pr:1125]
|
||||
- Fixed `filled` and `outlined` appearance styles in various components [issue:1102]
|
||||
- Fixed active state styles in the Awesome theme [pr:1129]
|
||||
- Fixed native text styles when applied to certain backgrounds [pr:https://github.com/shoelace-style/webawesome/pull/1130]
|
||||
- Improved the organization of essential and optional styles [pr:1113]
|
||||
### New Features {data-no-outline}
|
||||
|
||||
- Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover.
|
||||
|
||||
### Bug Fixes and Improvements {data-no-outline}
|
||||
|
||||
- Fixed a bug in `<wa-dropdown>` that prevented the menu from flipping/shifting to keep the menu in the viewport [discuss:1106]
|
||||
- Fixed the themes page so it shows the correct palette and imports
|
||||
|
||||
## 3.0.0-beta.1
|
||||
|
||||
@@ -39,8 +39,10 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
- Renamed the `classic` theme to `shoelace`
|
||||
- Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
|
||||
- Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
|
||||
<<<<<<< HEAD
|
||||
- `<wa-dropdown>` was reworked and simplified to not use menu, menu item, menu label; use `<wa-dropdown-item>` instead
|
||||
- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:940]
|
||||
> > > > > > > next
|
||||
- Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- `<wa-button caret>` => `<wa-button with-caret>`
|
||||
|
||||
@@ -136,21 +136,35 @@ layout: page
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
}
|
||||
.link-panel {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
& h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
& .icon-heading wa-icon {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
& p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
.icon-heading {
|
||||
> wa-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
& wa-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-brand-orange);
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
aspect-ratio: 1;
|
||||
padding: 0.5em;
|
||||
|
||||
&.brand-orange {
|
||||
background-color: var(--wa-brand-orange);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
& h3 {
|
||||
font-size: 1rem;
|
||||
@@ -210,8 +224,8 @@ layout: page
|
||||
text-align: left;
|
||||
white-space: wrap;
|
||||
}
|
||||
wa-button.tile::part(label) {
|
||||
width: 100%;
|
||||
wa-button.tile::part(end) {
|
||||
display: none;
|
||||
}
|
||||
wa-button.tile {
|
||||
width: 100%;
|
||||
@@ -271,27 +285,23 @@ layout: page
|
||||
<div class="beta-notice">
|
||||
<div>
|
||||
<wa-callout variant="brand">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
|
||||
<h3>Bigger and beta than ever</h3>
|
||||
</div>
|
||||
<p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
|
||||
<h3>Rise and shine, backers!</h3>
|
||||
</div>
|
||||
<p>Dig in to your exclusive Web Awesome Beta access. This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
|
||||
</wa-callout>
|
||||
</div>
|
||||
<div>
|
||||
<wa-button href="/docs/" appearance="outlined" class="tile">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="pen-ruler" fixed-width class="brand-orange"></wa-icon>
|
||||
<h3>Get started</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-right" fixed-width></wa-icon>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem;">
|
||||
<div class="icon-heading" style="margin-block-end: 0;">
|
||||
<wa-icon name="pen-ruler" fixed-width></wa-icon>
|
||||
<h3>Get started</h3>
|
||||
</div>
|
||||
<p>Check out our installation guide to start building with Web Awesome.</p>
|
||||
<wa-icon name="arrow-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
<p>Check out our installation guide to start building with Web Awesome.</p>
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -300,30 +310,30 @@ layout: page
|
||||
<h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>
|
||||
<p>Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.</p>
|
||||
<div class="grid">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="code" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="code" fixed-width></wa-icon>
|
||||
<h3>Entirely native</h3>
|
||||
</div>
|
||||
<p>Built on web standards to last for years to come. No excess tooling. No third-party bloat.</p>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="palette" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="palette" fixed-width></wa-icon>
|
||||
<h3>Fully customizable</h3>
|
||||
</div>
|
||||
<p>Show off your own style with components that consistently adapt to your theme.</p>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="wheelchair-move" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="wheelchair-move" fixed-width></wa-icon>
|
||||
<h3>Accessibility forward</h3>
|
||||
</div>
|
||||
<p>Build a website that everyone can use. Designed to be inclusive and usable by everyone.</p>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="handshake-simple" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="handshake-simple" fixed-width></wa-icon>
|
||||
<h3>Proudly open source</h3>
|
||||
</div>
|
||||
<p>Use Web Awesome Free however you like. Always free, always open source.</p>
|
||||
@@ -338,80 +348,20 @@ layout: page
|
||||
<p>Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.</p>
|
||||
</div>
|
||||
<div>
|
||||
<wa-button href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="github" fixed-width></wa-icon>
|
||||
<h3>GitHub</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
<p>Get involved by opening issues, contributing to discussions, or creating PRs.</p>
|
||||
<div class="link-panel">
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="envelope-open" fixed-width></wa-icon>
|
||||
<h3>Get in touch</h3>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://discord.gg/a74U7eYH" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="discord" fixed-width></wa-icon>
|
||||
<h3>Discord</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
<p>Share your work, ask questions, and explore ideas with other Web Awesome builders.</p>
|
||||
<p>Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at <a href="mailto:hello@webawesome.com">hello@webawesome.com</a>.</p>
|
||||
</div>
|
||||
<div class="link-panel">
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="hashtag" fixed-width></wa-icon>
|
||||
<h3>Follow us</h3>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="mailto:hello@webawesome.com" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="envelope-open" fixed-width></wa-icon>
|
||||
<h3 class="wa-cluster wa-gap-xs">
|
||||
<span>hello@webawesome.com</span>
|
||||
<wa-icon name="hand-wave" variant="regular"></wa-icon>
|
||||
</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<h2 class="wa-cluster brand-font">
|
||||
<wa-icon name="hashtag" style="color: var(--wa-brand-orange);"></wa-icon>
|
||||
<span>Stay in the know</span>
|
||||
</h2>
|
||||
<div class="wa-grid">
|
||||
<wa-button href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="bluesky" fixed-width></wa-icon>
|
||||
<h3>Bluesky</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="x-twitter" fixed-width></wa-icon>
|
||||
<h3>Twitter (X)</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="threads" fixed-width></wa-icon>
|
||||
<h3>Threads</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
<p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://bsky.app/profile/webawesome.com">Bluesky</a>, <a href="https://x.com/webawesomer">Twitter (X)</a>, and <a href="https://www.threads.com/@web.awesome">Threads</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -429,9 +379,9 @@ layout: page
|
||||
<div class="attribution">
|
||||
<span>Special thanks</span>
|
||||
<div class="button-list">
|
||||
<wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://lit.dev/">Lit</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://floating-ui.com/">Floating UI</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://animate.style/">animate.css</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://lunrjs.com/">Lunr</wa-button>
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
}
|
||||
|
||||
del {
|
||||
color: color-mix(in oklab, currentColor, transparent 10%);
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-decoration-color: var(--wa-color-danger-on-quiet);
|
||||
text-decoration-line: line-through;
|
||||
text-decoration-thickness: 0.09375em;
|
||||
@@ -190,7 +190,7 @@
|
||||
mark {
|
||||
padding: 0.125em 0.25em;
|
||||
|
||||
color: var(--wa-color-warning-on-quiet);
|
||||
color: inherit;
|
||||
|
||||
background-color: var(--wa-color-warning-fill-quiet);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
@@ -226,12 +226,13 @@
|
||||
kbd {
|
||||
padding: 0.125em 0.25em;
|
||||
|
||||
color: var(--wa-color-text-normal);
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
|
||||
border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);
|
||||
box-shadow: 0 0.125em 0 0 var(--wa-color-neutral-border-quiet);
|
||||
|
||||
wa-icon {
|
||||
vertical-align: -2px;
|
||||
@@ -248,12 +249,8 @@
|
||||
text-underline-offset: 0.125em;
|
||||
}
|
||||
|
||||
*:is([appearance~='accent'], .wa-accent) a {
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
|
||||
text-decoration: var(--wa-link-decoration-hover);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-hover);
|
||||
}
|
||||
|
||||
@@ -372,6 +372,10 @@
|
||||
--wa-transition-normal: 0;
|
||||
--wa-transition-fast: 0;
|
||||
|
||||
.wa-dark & {
|
||||
--wa-color-shadow: var(--wa-color-border-quiet);
|
||||
}
|
||||
|
||||
&[appearance='outlined'],
|
||||
&.wa-outlined:not(.wa-filled) {
|
||||
--wa-color-shadow: var(--wa-color-border-loud);
|
||||
@@ -394,7 +398,7 @@
|
||||
&:not([disabled]):not(:disabled):active {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
color: var(--wa-color-fill-quiet);
|
||||
color: var(--wa-color-fill-normal);
|
||||
background-color: var(--wa-color-shadow);
|
||||
border-color: var(--wa-color-shadow);
|
||||
box-shadow: none;
|
||||
@@ -403,12 +407,11 @@
|
||||
}
|
||||
}
|
||||
.wa-dark & {
|
||||
&[appearance~='accent'],
|
||||
&.wa-accent {
|
||||
&:not([appearance~='plain']):not(.wa-plain) {
|
||||
&:not([disabled]):not(:disabled):active {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
color: var(--wa-color-on-quiet);
|
||||
color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -477,8 +480,8 @@
|
||||
&.wa-accent {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
--wa-color-shadow: var(--wa-color-on-loud);
|
||||
border-color: var(--wa-color-shadow);
|
||||
--wa-color-shadow: currentColor;
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -488,6 +491,7 @@
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
--wa-color-shadow: var(--wa-color-border-quiet);
|
||||
border-color: var(--wa-color-border-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user