mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-14 21:19:13 +00:00
Compare commits
1 Commits
native-cod
...
changelog-
| Author | SHA1 | Date | |
|---|---|---|---|
|
d82b1b655a |
@@ -12,22 +12,22 @@ export const themes = [
|
||||
isPro: false,
|
||||
fonts: {
|
||||
body: {
|
||||
name: 'OS Default (sans-serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-sans-serif, system-ui, sans-serif',
|
||||
href: null,
|
||||
},
|
||||
heading: {
|
||||
name: 'OS Default (sans-serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-sans-serif, system-ui, sans-serif',
|
||||
href: null,
|
||||
},
|
||||
code: {
|
||||
name: 'OS Default (monospace)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-monospace, monospace',
|
||||
href: null,
|
||||
},
|
||||
longform: {
|
||||
name: 'OS Default (serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-serif, serif',
|
||||
href: null,
|
||||
},
|
||||
@@ -82,7 +82,7 @@ export const themes = [
|
||||
href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
|
||||
},
|
||||
code: {
|
||||
name: 'OS Default (monospace)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-monospace, monospace',
|
||||
href: null,
|
||||
},
|
||||
@@ -132,22 +132,22 @@ export const themes = [
|
||||
isPro: false,
|
||||
fonts: {
|
||||
body: {
|
||||
name: 'OS Default (sans-serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-sans-serif, system-ui, sans-serif',
|
||||
href: null,
|
||||
},
|
||||
heading: {
|
||||
name: 'OS Default (sans-serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-sans-serif, system-ui, sans-serif',
|
||||
href: null,
|
||||
},
|
||||
code: {
|
||||
name: 'OS Default (monospace)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-monospace, monospace',
|
||||
href: null,
|
||||
},
|
||||
longform: {
|
||||
name: 'OS Default (serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-serif, serif',
|
||||
href: null,
|
||||
},
|
||||
@@ -442,7 +442,7 @@ export const themes = [
|
||||
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
|
||||
},
|
||||
code: {
|
||||
name: 'OS Default (monospace)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-monospace, monospace',
|
||||
href: null,
|
||||
},
|
||||
@@ -562,7 +562,7 @@ export const themes = [
|
||||
href: 'https://fonts.bunny.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap',
|
||||
},
|
||||
code: {
|
||||
name: 'OS Default (monospace)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-monospace, monospace',
|
||||
href: null,
|
||||
},
|
||||
@@ -622,12 +622,12 @@ export const themes = [
|
||||
href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
|
||||
},
|
||||
code: {
|
||||
name: 'OS Default (monospace)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-monospace, monospace',
|
||||
href: null,
|
||||
},
|
||||
longform: {
|
||||
name: 'OS Default (serif)',
|
||||
name: 'OS Default',
|
||||
css: 'ui-serif, serif',
|
||||
href: null,
|
||||
},
|
||||
|
||||
@@ -29,6 +29,9 @@
|
||||
<li><a href="/docs/resources/browser-support">Browser Support</a></li>
|
||||
<li><a href="/docs/resources/contributing">Contributing</a></li>
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
<li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
|
||||
<li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
|
||||
<li><a href="/tos">Terms of Service</a></li>
|
||||
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
|
||||
</ul>
|
||||
|
||||
@@ -402,16 +405,6 @@
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
{# Policies #}
|
||||
<h2>Terms & Policies</h2>
|
||||
<ul>
|
||||
<li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
|
||||
<li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
|
||||
<li><a href="/tos">Terms of Service</a></li>
|
||||
<li><a href="/privacy">Privacy Policy</a></li>
|
||||
<li><a href="/refunds">Refund Policy</a></li>
|
||||
</ul>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-xl);"></wa-divider>
|
||||
|
||||
<div class="wa-stack wa-gap-xl" id="colophon">
|
||||
|
||||
@@ -2,25 +2,22 @@
|
||||
pre[id*='code-block-'] {
|
||||
color-scheme: dark;
|
||||
color: white;
|
||||
background-color: var(--code-background, var(--wa-color-neutral-20));
|
||||
background-color: var(--wa-color-neutral-20);
|
||||
|
||||
/* Ensures a discernible background color in dark mode
|
||||
* Useful for themes that use gray-20 as --wa-color-surface-default */
|
||||
.wa-dark & {
|
||||
background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
|
||||
.code-comment,
|
||||
.code-prolog,
|
||||
.code-doctype,
|
||||
.code-cdata {
|
||||
color: var(--code-comment, var(--wa-color-gray-70));
|
||||
}
|
||||
|
||||
.code-cdata,
|
||||
.code-operator,
|
||||
.code-punctuation {
|
||||
color: var(--code-operator, var(--wa-color-gray-70));
|
||||
color: var(--wa-color-gray-70);
|
||||
}
|
||||
|
||||
.code-namespace {
|
||||
@@ -31,27 +28,24 @@ pre[id*='code-block-'] {
|
||||
.code-keyword,
|
||||
.code-tag,
|
||||
.code-url {
|
||||
color: var(--code-keyword, var(--wa-color-indigo-70));
|
||||
color: var(--wa-color-indigo-70);
|
||||
}
|
||||
|
||||
.code-symbol,
|
||||
.code-deleted,
|
||||
.code-important {
|
||||
color: var(--code-error, var(--wa-color-red-70));
|
||||
}
|
||||
|
||||
.code-string,
|
||||
.code-char,
|
||||
.code-constant {
|
||||
color: var(--code-string, var(--wa-color-green-70));
|
||||
color: var(--wa-color-red-70);
|
||||
}
|
||||
|
||||
.code-boolean,
|
||||
.code-constant,
|
||||
.code-selector,
|
||||
.code-attr-name,
|
||||
.code-string,
|
||||
.code-char,
|
||||
.code-builtin,
|
||||
.code-inserted {
|
||||
color: var(--code-literal, var(--wa-color-green-70));
|
||||
color: var(--wa-color-green-70);
|
||||
}
|
||||
|
||||
.code-atrule,
|
||||
@@ -61,7 +55,7 @@ pre[id*='code-block-'] {
|
||||
.code-function,
|
||||
.code-class-name,
|
||||
.code-regex {
|
||||
color: var(--code-value, var(--wa-color-blue-70));
|
||||
color: var(--wa-color-blue-70);
|
||||
}
|
||||
|
||||
.code-important,
|
||||
|
||||
@@ -252,9 +252,8 @@ wa-button.delete {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
wa-page::part(drawer__dialog),
|
||||
wa-page::part(menu) {
|
||||
overflow: clip;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* smaller viewports-based navigation */
|
||||
|
||||
@@ -132,7 +132,7 @@ Most (but not all) components expose parts. You can find them in each component'
|
||||
|
||||
If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
|
||||
|
||||
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using standard CSS properties and CSS parts:
|
||||
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
|
||||
|
||||
```html {.example}
|
||||
<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
|
||||
@@ -143,16 +143,60 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
|
||||
</label>
|
||||
|
||||
<style>
|
||||
wa-checkbox.pinkify::part(control),
|
||||
wa-checkbox.pinkify,
|
||||
input[type='checkbox'].pinkify {
|
||||
--background-color-checked: hotpink;
|
||||
--border-color-checked: hotpink;
|
||||
--border-width: 3px;
|
||||
--checked-icon-color: lavenderblush;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
|
||||
|
||||
```html {.example}
|
||||
<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
|
||||
<br />
|
||||
<label>
|
||||
<input type="checkbox" class="purpleify" />
|
||||
HTML checkbox
|
||||
</label>
|
||||
|
||||
<style>
|
||||
wa-checkbox.purpleify::part(control),
|
||||
input[type='checkbox'].purpleify {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
wa-checkbox.pinkify:state(checked)::part(control),
|
||||
input[type='checkbox'].pinkify:checked {
|
||||
background-color: hotpink;
|
||||
border-color: hotpink;
|
||||
color: lavenderblush;
|
||||
wa-checkbox.purpleify:state(checked)::part(control),
|
||||
input[type='checkbox'].purpleify:checked {
|
||||
background-color: darkorchid;
|
||||
border-color: darkorchid;
|
||||
color: lavender;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
|
||||
## Style Utilities
|
||||
|
||||
Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
|
||||
|
||||
For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
|
||||
|
||||
```html {.example}
|
||||
<wa-callout appearance="filled-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Here's a callout with <code>appearance="outlined"</code>
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-outlined wa-filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Here's a callout with <code>class="wa-outlined"</code>
|
||||
</wa-callout>
|
||||
|
||||
<style>
|
||||
wa-callout:is([appearance~='outlined']) {
|
||||
border-left-width: var(--wa-panel-border-radius);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -24,8 +24,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Added the Kazakh translation [pr:1496]
|
||||
- Added docs for code completion for VS Code and JetBrains [pr:1550]
|
||||
- Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
|
||||
- Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
|
||||
- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
|
||||
- Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
|
||||
- Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
|
||||
- Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
|
||||
@@ -39,9 +37,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
|
||||
- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
|
||||
- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
|
||||
- Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
|
||||
- Improved Native Styles to use the `--wa-font-weight-code` design token
|
||||
- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
|
||||
- Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
|
||||
- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
|
||||
- Upgraded `<wa-page>` from _experimental_ to _stable_
|
||||
|
||||
## 3.0.0-beta.6
|
||||
|
||||
@@ -41,7 +41,6 @@ import styles from './button.css';
|
||||
*/
|
||||
@customElement('wa-button')
|
||||
export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
|
||||
static css = [styles, variantStyles, sizeStyles];
|
||||
|
||||
static get validators() {
|
||||
|
||||
@@ -228,7 +228,6 @@
|
||||
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
font-weight: var(--wa-font-weight-code);
|
||||
|
||||
border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
@@ -282,7 +281,6 @@
|
||||
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
font-weight: var(--wa-font-weight-code);
|
||||
|
||||
background-color: var(--wa-color-overlay-inline);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
@@ -293,7 +291,6 @@
|
||||
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
font-weight: var(--wa-font-weight-code);
|
||||
white-space: pre;
|
||||
|
||||
background-color: var(--wa-color-overlay-inline);
|
||||
@@ -465,7 +462,7 @@
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: var(--wa-color-text-quiet);
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
|
||||
center no-repeat;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
@@ -877,6 +874,7 @@
|
||||
input[type='radio'] {
|
||||
appearance: none;
|
||||
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -924,18 +922,21 @@
|
||||
|
||||
&:checked::after,
|
||||
&:indeterminate::after {
|
||||
position: absolute;
|
||||
|
||||
width: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
|
||||
height: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
|
||||
|
||||
content: '';
|
||||
|
||||
width: var(--wa-form-control-toggle-size);
|
||||
height: var(--wa-form-control-toggle-size);
|
||||
scale: var(--checked-icon-scale);
|
||||
|
||||
background-color: currentColor;
|
||||
|
||||
scale: var(--checked-icon-scale);
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
|
||||
center / 1em 1em no-repeat;
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
|
||||
center no-repeat;
|
||||
}
|
||||
|
||||
&:indeterminate::after {
|
||||
@@ -963,8 +964,7 @@
|
||||
content: '';
|
||||
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
scale: var(--checked-icon-scale);
|
||||
width: round(calc(100% * var(--checked-icon-scale)), 1px);
|
||||
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
@@ -1065,7 +1065,9 @@
|
||||
|
||||
/* Select */
|
||||
select {
|
||||
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
|
||||
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
|
||||
|
||||
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
|
||||
|
||||
appearance: none;
|
||||
|
||||
@@ -1078,7 +1080,6 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right var(--wa-form-control-padding-inline);
|
||||
background-blend-mode: hue, difference;
|
||||
background-size: 1rem 1rem;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -457,7 +457,7 @@
|
||||
border-color: var(--wa-color-gray-50);
|
||||
}
|
||||
|
||||
&:state(checked)::part(control) {
|
||||
&[checked]::part(control) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
border-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
@@ -466,7 +466,7 @@
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
|
||||
}
|
||||
&:state(checked)::part(thumb) {
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user