mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
1b654c7c85
* Move custom properties related to shadows and borders to separate stylesheets * Change base values and themer calculations related to shadows and borders to be unitless * Add low-level custom properties for alert, button, card, input, select, switch, and textarea * Add generic guidance for authoring custom properties to the Contributing docs
86 lines
3.1 KiB
Plaintext
86 lines
3.1 KiB
Plaintext
<ul>
|
|
<li>
|
|
<h2>Experimental</h2>
|
|
<ul>
|
|
<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
|
|
const toggle = document.getElementById('theme-toggle');
|
|
toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
|
|
|
|
toggle.addEventListener('wa-change', () => {
|
|
document.documentElement.classList.toggle('wa-theme-default-dark');
|
|
localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
|
|
});
|
|
</script>
|
|
<li><a href="/experimental/sandbox">Sandbox</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2>Getting Started</h2>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/getting-started/installation">Installation</a></li>
|
|
<li><a href="/getting-started/usage">Usage</a></li>
|
|
<li><a href="/getting-started/themes">Themes</a></li>
|
|
<li><a href="/getting-started/customizing">Customizing</a></li>
|
|
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
|
<li><a href="/getting-started/localization">Localization</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2>Frameworks</h2>
|
|
<ul>
|
|
<li><a href="/frameworks/react">React</a></li>
|
|
<li><a href="/frameworks/vue">Vue</a></li>
|
|
<li><a href="/frameworks/angular">Angular</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2>Resources</h2>
|
|
<ul>
|
|
<li><a href="/resources/community">Community</a></li>
|
|
<li><a href="https://github.com/shoelace-style/shoelace/discussions">Help & Support</a></li>
|
|
<li><a href="/resources/accessibility">Accessibility</a></li>
|
|
<li><a href="/resources/contributing">Contributing</a></li>
|
|
<li><a href="/resources/changelog">Changelog</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2>Components</h2>
|
|
<ul>
|
|
{% for component in meta.components %}
|
|
<li>
|
|
<a href="/components/{{ component.tagName | removeWaPrefix }}">
|
|
{{ component.name | classNameToComponentName }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2>Design Tokens</h2>
|
|
<ul>
|
|
<li><a href="/tokens/typography">Typography</a></li>
|
|
<li><a href="/tokens/color">Color</a></li>
|
|
<li><a href="/tokens/spacing">Spacing</a></li>
|
|
<li><a href="/tokens/borders">Borders</a></li>
|
|
<li><a href="/tokens/shadows">Shadows</a></li>
|
|
<li><a href="/tokens/transition">Transition</a></li>
|
|
<li><a href="/tokens/z-index">Z-index</a></li>
|
|
<li><a href="/tokens/more">More Tokens</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2>Tutorials</h2>
|
|
<ul>
|
|
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
|
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
|
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|