Inspect Web Awesome’s actual semantic tokens across native custom elements, including scoped radius and spacing changes, shadow-DOM styling, select behavior and input validation.
Native Web Awesome 3.14.0 custom elements and default theme, bundled locally. · Implementation reference
02
Web Awesome Design System Design Reference
Web Awesome 3.14.0 default theme CSS, inspected in the installed package. Color entries below are semantic aliases; their palette references are retained rather than replaced by guessed hex equivalents. Scale-derived pixel examples assume a 16px root and scale=1.
Web Awesome Design System Custom Elements With Their Own Component Boundary
Custom Elements With Their Own Component Boundary
Web Awesome provides registered HTML custom elements rather than requiring a React application. Once wa-input or wa-select is imported, it can be placed in ordinary HTML and controlled through its documented properties and events. This workbench bundles version 3.14.0 and uses only components available in the public package.
The visible controls are the actual custom elements, including their shadow-root implementation. The surrounding header, sections and readout are original HTML. This makes the specimen useful for observing which styling decisions cross the component boundary through inherited custom properties and which belong to the page composition.
Web Awesome Design System Keep Semantic Color Aliases Intact
Keep Semantic Color Aliases Intact
The default theme distinguishes raised, default and lowered surfaces, normal and quiet text, and multiple brand fill/on-color pairs. The token readout uses the lowered surface, the main specimen uses the default surface, and the small badge pairs brand-fill-quiet with brand-on-quiet. These roles remain meaningful when the appearance changes.
The reference retains aliases such as var(--wa-color-neutral-10) instead of translating every role into an assumed hex value. A palette can change while the semantic assignment remains valid. If customizing a strong brand action, consider both the fill and its on-color. Changing one without its partner can make button text hard to read.
Web Awesome Design System Change the Scale Without Rewriting Every Component
Change the Scale Without Rewriting Every Component
The radius selector changes --wa-border-radius-scale on the specimen only. At scale one, the default small/medium/large radii resolve to three, six and twelve pixels at a sixteen-pixel root. Setting scale zero makes those scalable corners square; scale two doubles them. The pill and circle tokens are separate concepts and should not be assumed to follow this multiplier.
The spacing selector changes --wa-space-scale. The specimen’s padding, gaps and readout spacing consume the official space tokens, so their relationships change together. This does not promise that every dimension of every component scales: component control sizing has its own token relationships. The editing panel is outside the scope, making comparison stable while the specimen changes.
Choose Square and inspect the input, container and readout corners.
Choose Relaxed spacing and compare the specimen gaps with the unchanged editing panel.
Restore defaults to return both multipliers and appearance together.
Web Awesome Design System Typography Tokens and Original Heading Choices
Typography Tokens and Original Heading Choices
The default body family is ui-sans-serif, system-ui, sans-serif. Heading family aliases the body family, while code uses ui-monospace. The normal line-height token is 1.6; condensed is 1.2. The medium type token is one rem multiplied by font-size-scale, and larger sizes use rounded calculations. The table shows those expressions rather than hiding their dependencies.
The workbench itself chooses a 34px heading and 23px section heading, reducing the page heading at a 700px local breakpoint. These are explicitly original page rules. The native fields retain the library’s label and hint styling, allowing the user to compare a custom page hierarchy with default component typography.
Web Awesome Design System Initial Values, Properties and Change Events
Initial Values, Properties and Change Events
Each select contains wa-option children with stable values. The default options use selected, matching the current component guidance for initial selection. Runtime changes read the select value property. The theme controls listen for change events and update CSS custom properties; they do not parse text from rendered option labels.
The region select is a normal specimen field and does not control an external storage service. Its selected value is reported in the local action message. The interface avoids pretending that choosing Europe allocates storage. This distinction matters when a realistic-looking component demonstration uses product vocabulary.
Web Awesome Design System Style Through Tokens and Documented Parts
Style Through Tokens and Documented Parts
Ordinary descendant selectors cannot freely reach inside a component’s shadow tree. This example uses inherited theme variables so the field background, text and radius can remain coordinated with surrounding HTML. That is a supported styling surface rather than an attempt to target internal generated markup.
For component-specific changes, consult the documented CSS custom properties and CSS parts for that component. A global input selector will not necessarily alter the internal input of wa-input. Conversely, placing a theme class or variable on a common ancestor can intentionally affect many descendant custom elements, so the scope must be chosen carefully.
Web Awesome Design System Upgrade, Validation and Local Results
Upgrade, Validation and Local Results
Component registration is asynchronous from the page’s perspective. The example waits for customElements.whenDefined for the APIs it uses, then waits for select updates before reading initial values. This avoids applying defaults against an element that has not yet upgraded from an unknown HTML tag to its component class.
The workspace action uses setCustomValidity and reportValidity on wa-input. A trimmed name under two characters is rejected; an input event clears the custom error so a correction can be retried. The disabled Invite later button is a native component disabled state. The status text reports only a locally applied name, and the complete code contains no workspace creation or allocation request.
Accessible labels are supplied through label attributes.
Hints explain the name constraint before an error occurs.
The disabled action remains noninteractive while still showing its purpose.
Web Awesome Design System Import the Theme and the Components You Use
Import the Theme and the Components You Use
Install @awesome.me/[email protected] in a Vite vanilla application and use the supplied main.js as the entry. The default theme stylesheet is required; the example deliberately does not load the broader native reset or utility bundle because its page layout is explicit CSS. Imports register the five component types used in the markup.
The npm dist modules are intended for bundlers. The dist-cdn distribution is the alternative for direct browser module loading because dependencies are bundled differently. Do not copy a dist import into a plain script tag and assume bare dependencies will resolve. Components that need external assets require the documented base-path setup; this specimen avoids user-supplied icon assets and is bundled for offline operation.
Web Awesome Design System Public Components and Honest Theme Boundaries
Public Components and Honest Theme Boundaries
The workbench demonstrates the default theme and public components. Some Web Awesome components, patterns and design resources are Pro offerings, so the page does not imply that installing the public package unlocks every item in the catalog. A component’s availability should be checked before making it a required dependency in a shared design system.
A reusable product theme should document which variables are changed, where they are scoped, and how both appearance modes are checked. The live workbench is a small example of that process: a reader can inspect the exact changed variables and compare the resulting native components, rather than relying on a disconnected palette image.
Registers components, waits for upgrade, changes scoped custom properties and applies local validity.
javascript
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
Create a Vite vanilla project and use the complete main.js and style.css shown above.
04
Web Awesome Design System Agent Setup
Implementation Starting Point
The complete main.js, CSS and body examples reproduce the workbench in a bundler. The offline demo is an esbuild bundle with the theme CSS inlined. No React provider is required.
javascript
// Create a Vite vanilla project, then install:
// npm install @awesome.me/[email protected]
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.
// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
A Prompt for Your Project
Agent Prompt
Use the Web Awesome 3.14.0 scoped token workbench and register the supplied wa-select, wa-option, wa-input, wa-button and wa-switch elements. Wait for component definition and updateComplete before reading initial selections. Apply --wa-border-radius-scale and --wa-space-scale only to the specimen region, and toggle its wa-light/wa-dark class without changing unrelated page content. Keep the visible token readout synchronized with the native controls and preserve labels. Treat the workbench as an inspection tool, not a device-management interface.
05
Web Awesome Design System Sources and Scope
Web Awesome 3.14.0 public components and default theme. Layout choices are original; local name application creates no workspace or storage.
