use --wa-font-weight-code in native styles

update font names
add focus delegation; fixes #1622 (#1651 )
2026-01-13 04:29:14 +00:00 · 2025-10-24 11:27:19 -04:00 · 2025-10-24 11:13:04 -04:00 · 2025-10-24 09:28:25 -04:00 · 2025-10-24 08:22:35 -04:00 · 2025-10-23 16:36:09 -04:00
7 changed files with 53 additions and 44 deletions
--- a/packages/webawesome/docs/_data/themer.js
+++ b/packages/webawesome/docs/_data/themer.js
@@ -12,22 +12,22 @@ export const themes = [
    isPro: false,
    fonts: {
      body: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
        css: 'ui-sans-serif, system-ui, sans-serif',
        href: null,
      },
      heading: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
        css: 'ui-sans-serif, system-ui, sans-serif',
        href: null,
      },
      code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
        css: 'ui-monospace, monospace',
        href: null,
      },
      longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
        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',
+        name: 'OS Default (monospace)',
        css: 'ui-monospace, monospace',
        href: null,
      },
@@ -132,22 +132,22 @@ export const themes = [
    isPro: false,
    fonts: {
      body: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
        css: 'ui-sans-serif, system-ui, sans-serif',
        href: null,
      },
      heading: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
        css: 'ui-sans-serif, system-ui, sans-serif',
        href: null,
      },
      code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
        css: 'ui-monospace, monospace',
        href: null,
      },
      longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
        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',
+        name: 'OS Default (monospace)',
        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',
+        name: 'OS Default (monospace)',
        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',
+        name: 'OS Default (monospace)',
        css: 'ui-monospace, monospace',
        href: null,
      },
      longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
        css: 'ui-serif, serif',
        href: null,
      },
--- a/packages/webawesome/docs/assets/styles/code-highlighter.css
+++ b/packages/webawesome/docs/assets/styles/code-highlighter.css
@@ -2,22 +2,25 @@
 pre[id*='code-block-'] {
  color-scheme: dark;
  color: white;
-  background-color: var(--wa-color-neutral-20);
+  background-color: var(--code-background, 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(--wa-color-surface-lowered);
+    background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
  }
 }

 .code-comment,
 .code-prolog,
 .code-doctype,
-.code-cdata,
+.code-cdata {
+  color: var(--code-comment, var(--wa-color-gray-70));
+}
+
 .code-operator,
 .code-punctuation {
-  color: var(--wa-color-gray-70);
+  color: var(--code-operator, var(--wa-color-gray-70));
 }

 .code-namespace {
@@ -28,24 +31,27 @@ pre[id*='code-block-'] {
 .code-keyword,
 .code-tag,
 .code-url {
-  color: var(--wa-color-indigo-70);
+  color: var(--code-keyword, var(--wa-color-indigo-70));
 }

 .code-symbol,
 .code-deleted,
 .code-important {
-  color: var(--wa-color-red-70);
+  color: var(--code-error, var(--wa-color-red-70));
+}
+
+.code-string,
+.code-char,
+.code-constant {
+  color: var(--code-string, var(--wa-color-green-70));
 }

 .code-boolean,
-.code-constant,
 .code-selector,
 .code-attr-name,
-.code-string,
-.code-char,
 .code-builtin,
 .code-inserted {
-  color: var(--wa-color-green-70);
+  color: var(--code-literal, var(--wa-color-green-70));
 }

 .code-atrule,
@@ -55,7 +61,7 @@ pre[id*='code-block-'] {
 .code-function,
 .code-class-name,
 .code-regex {
-  color: var(--wa-color-blue-70);
+  color: var(--code-value, var(--wa-color-blue-70));
 }

 .code-important,
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -252,8 +252,9 @@ wa-button.delete {
  padding-bottom: 1rem;
 }

+wa-page::part(drawer__dialog),
 wa-page::part(menu) {
-  scrollbar-width: thin;
+  overflow: clip;
 }

 /* smaller viewports-based navigation */
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -24,6 +24,8 @@ 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]
@@ -37,9 +39,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]
- 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]
+- 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]
 - Upgraded `<wa-page>` from _experimental_ to _stable_

 ## 3.0.0-beta.6
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -41,6 +41,7 @@ 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() {
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -228,6 +228,7 @@

    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);
@@ -281,6 +282,7 @@

    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);
@@ -291,6 +293,7 @@

    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);
@@ -462,7 +465,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" 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>')
+      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>')
        center no-repeat;
      width: 1rem;
      height: 1rem;
@@ -874,7 +877,6 @@
  input[type='radio'] {
    appearance: none;

-    position: relative;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
@@ -922,21 +924,18 @@

    &: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: '';

-      background-color: currentColor;
-
+      width: var(--wa-form-control-toggle-size);
+      height: var(--wa-form-control-toggle-size);
      scale: var(--checked-icon-scale);
+
+      background-color: currentColor;
    }

    &:checked::after {
-      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;
+      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;
    }

    &:indeterminate::after {
@@ -964,7 +963,8 @@
      content: '';

      aspect-ratio: 1;
-      width: round(calc(100% * var(--checked-icon-scale)), 1px);
+      width: 100%;
+      scale: var(--checked-icon-scale);

      background-color: currentColor;
      border-radius: 50%;
@@ -1065,9 +1065,7 @@

  /* Select */
  select {
-    --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>');
+    --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>');

    appearance: none;

@@ -1080,6 +1078,7 @@
    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;
  }
--- a/packages/webawesome/src/styles/themes/shoelace.css
+++ b/packages/webawesome/src/styles/themes/shoelace.css
@@ -457,7 +457,7 @@
        border-color: var(--wa-color-gray-50);
      }

-      &[checked]::part(control) {
+      &:state(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);
      }
-      &[checked]::part(thumb) {
+      &:state(checked)::part(thumb) {
        border-color: var(--wa-form-control-activated-color);
      }
    }
Author	SHA1	Message	Date
Cory LaViska	696580a03b	use --wa-font-weight-code in native styles	2025-10-24 11:27:19 -04:00
Cory LaViska	ef0b9ff742	update font names	2025-10-24 11:13:04 -04:00
Cory LaViska	f906b07d98	add focus delegation; fixes #1622 (#1651 )	2025-10-24 09:28:25 -04:00
Brian Talbot	1bfebe36a3	Abstract Code Highlighter Syntax Coloring (#1647 ) * abstracting syntax coloring in code-highlighter.css * adding initial custom properties to override colors * light re-grouping of rules + color application * fixup! removing `wa-` prefix	2025-10-24 08:22:35 -04:00
Lindsay M	3612f72a3f	Fix icons in native styles (#1643 ) * change svg paths to FA Free * fix radio checked icon size/position * fix native checkbox icon sizing * ensure checkmark size changes * prettier coming in clutch	2025-10-23 16:36:09 -04:00
Konnor Rogers	0f6cf33020	Fix double scrollbar in Chrome / Safari (#1624 ) * Fix double scrollbar * fix dialog double scroll * try `hidden` * try `clip` this time * remove extra newline (thx, prettier ❤️) --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-10-23 15:59:58 -04:00
Lindsay M	95fb68c7fa	Fix Customizing > Native Elements examples (#1642 ) * remove custom property example for customizing native elements * remove outdated Customizing > Style Utilities example	2025-10-23 14:38:56 -04:00
Lindsay M	7d3c676ea8	Fix checked switch styles in Shoelace theme (#1641 )	2025-10-23 13:50:53 -04:00