js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts

Browse Source
This commit is contained in:
konnorrogers
2023-09-21 10:05:16 -04:00
parent 32bc7f2207 a2e9a3de96
commit 0509fb041f
8 changed files with 108 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/default.njk
View File

@@ -35,6 +35,7 @@
{# Web Awesome #}
<link rel="stylesheet" href="/dist/themes/applied.css" />
<link rel="stylesheet" href="/dist/themes/forms.css" />
<link rel="stylesheet" href="/dist/themes/default.css" />
<script type="module" src="/dist/autoloader.js"></script>

3
docs/_includes/sidebar.njk
View File

@@ -2,8 +2,9 @@
<li>
<h2>Experimental</h2>
<ul>
<li><a href="/experimental/style-guide">Style Guide</a></li>
<li><a href="/experimental/themer">Themer</a></li>
<li><a href="/experimental/style-guide">Style Guide</a></li>
<li><a href="/experimental/form-validation">Form Validation Styles</a></li>
<li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
<script type="module">
// Temporary dark toggle

52
docs/pages/experimental/form-validation.md Normal file
View File

@@ -0,0 +1,52 @@
---
meta:
title: Form Control Validation
description: TODO
---
# Form Control Validation
Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls.
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<div>
<h3>Valid</h3>
<wa-input class="wa-valid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
<wa-select class="wa-valid" label="Choose one" help-text="Make a choice already">
<wa-option>There can be only one!</wa-option>
<wa-option>Well, maybe two is OK</wa-option>
</wa-select>
<wa-textarea class="wa-valid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
<wa-range class="wa-valid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
<wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
<wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
<wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
<wa-switch class="wa-valid">More awesome</wa-switch><br><br>
<wa-radio-group class="wa-valid" label="Select an option" name="a" value="1">
<wa-radio value="1">Option 1</wa-radio>
<wa-radio value="2">Option 2</wa-radio>
<wa-radio value="3">Option 3</wa-radio>
</wa-radio-group><br>
<wa-button variant="brand">Submit Form</wa-button>
</div>
<div>
<h3>Invalid</h3>
<wa-input class="wa-invalid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
<wa-select class="wa-invalid" label="Choose one" help-text="Make a choice already">
<wa-option>There can be only one!</wa-option>
<wa-option>Well, maybe two is OK</wa-option>
</wa-select>
<wa-textarea class="wa-invalid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
<wa-range class="wa-invalid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
<wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
<wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
<wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
<wa-switch class="wa-invalid">More awesome</wa-switch><br><br>
<wa-radio-group class="wa-invalid" label="Select an option" name="a" value="1">
<wa-radio value="1">Option 1</wa-radio>
<wa-radio value="2">Option 2</wa-radio>
<wa-radio value="3">Option 3</wa-radio>
</wa-radio-group><br>
<wa-button variant="brand">Submit Form</wa-button>
</div>
</div>

9
docs/pages/experimental/style-guide.md
View File

@@ -160,12 +160,3 @@ export function thing() {
<dt>Definition 3</dt>
<dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
</dl>
## Forms
<fieldset>
<legend>Fieldset</legend>
<label><input type="radio" name="gender" value="Male"> Option 1</label><br>
<label><input type="radio" name="gender" value="Female"> Option 2</label><br>
<label><input type="radio" name="gender" value="other-none-na"> Option 3</label>
</fieldset>

1
scripts/build.js
View File

@@ -181,7 +181,6 @@ async function nextTask(label, action) {
console.error(`${chalk.red('✘')} ${err}`);
if (err.stdout) console.error(chalk.red(err.stdout));
if (err.stderr) console.error(chalk.red(err.stderr));
process.exit(1);
}
}

3
src/themes/applied.css
View File

@@ -403,7 +403,8 @@ button:focus {
outline: none;
}
:focus-visible {
a:focus-visible,
button:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

2
src/themes/default.css
View File

@@ -280,6 +280,8 @@
--wa-form-controls-value-line-height: var(--wa-font-height-compact);
--wa-form-controls-padding: var(--wa-space-square-s);
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
--wa-form-controls-placeholder-color-valid: var(--wa-color-green-60);
--wa-form-controls-placeholder-color-invalid: var(--wa-color-red-60);
/**
* Panels

49
src/themes/forms.css Normal file
View File

@@ -0,0 +1,49 @@
.wa-invalid {
--wa-form-controls-border-color-resting: var(--wa-color-danger-outline-vivid);
--wa-form-controls-border-color-activated: var(--wa-color-danger-outline-vivid);
--wa-form-controls-text-color: var(--wa-color-danger-text-on-muted);
--wa-form-controls-placeholder-color: var(--wa-form-controls-placeholder-color-invalid);
--wa-color-brand-fill-vivid: var(--wa-color-danger-fill-vivid);
--wa-color-brand-fill-vivid-alt: var(--wa-color-danger-fill-vivid-alt);
--wa-color-brand-fill-muted: var(--wa-color-danger-fill-muted);
--wa-color-brand-fill-muted-alt: var(--wa-color-danger-fill-muted-alt);
--wa-color-brand-outline-vivid: var(--wa-color-danger-outline-vivid);
--wa-color-brand-outline-vivid-alt: var(--wa-color-danger-outline-vivid-alt);
--wa-color-brand-outline-muted: var(--wa-color-danger-outline-muted);
--wa-color-brand-outline-muted-alt: var(--wa-color-danger-outline-muted-alt);
--wa-color-brand-text-on-vivid: var(--wa-color-danger-text-on-vivid);
--wa-color-brand-text-on-muted: var(--wa-color-danger-text-on-muted);
--wa-color-brand-text-on-surface: var(--wa-color-danger-text-on-surface);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-danger-outline-vivid);
/* Help text */
--wa-color-text-quiet: var(--wa-color-danger-text-on-muted);
}
.wa-valid {
--wa-form-controls-border-color-resting: var(--wa-color-success-outline-vivid);
--wa-form-controls-border-color-activated: var(--wa-color-success-outline-vivid);
--wa-form-controls-text-color: var(--wa-color-success-text-on-muted);
--wa-form-controls-placeholder-color: var(--wa-form-controls-placeholder-color-valid);
--wa-color-brand-fill-vivid: var(--wa-color-success-fill-vivid);
--wa-color-brand-fill-vivid-alt: var(--wa-color-success-fill-vivid-alt);
--wa-color-brand-fill-muted: var(--wa-color-success-fill-muted);
--wa-color-brand-fill-muted-alt: var(--wa-color-success-fill-muted-alt);
--wa-color-brand-outline-vivid: var(--wa-color-success-outline-vivid);
--wa-color-brand-outline-vivid-alt: var(--wa-color-success-outline-vivid-alt);
--wa-color-brand-outline-muted: var(--wa-color-success-outline-muted);
--wa-color-brand-outline-muted-alt: var(--wa-color-success-outline-muted-alt);
--wa-color-brand-text-on-vivid: var(--wa-color-success-text-on-vivid);
--wa-color-brand-text-on-muted: var(--wa-color-success-text-on-muted);
--wa-color-brand-text-on-surface: var(--wa-color-success-text-on-surface);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-success-outline-vivid);
/* Help text */
--wa-color-text-quiet: var(--wa-color-success-text-on-muted);
}