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

Docs: Add Shared Monorepo Utils + DRY Out Styling (#1497)

Browse Source 
* adding utils.css
* importing utils.css in docs.css
* removing shared styles now in utils.css
* using hover-icon util in toggle navigation
* updating hover-icon a11y in header
* revising wa-icon embiggening utility
This commit is contained in:
Brian Talbot
2025-09-26 14:35:19 -04:00
committed by GitHub
parent e68640b8ca
commit 336a3acdd0
6 changed files with 142 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/webawesome/docs/_includes/base.njk
View File

@@ -41,7 +41,8 @@
<header slot="header" class="wa-split">
{# Nav toggle #}
<wa-button appearance="plain" size="small" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
<wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
<wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
</wa-button>
{# Logo - Desktop #}

12
packages/webawesome/docs/_includes/color-scheme-selector.njk
View File

@@ -1,20 +1,20 @@
<wa-dropdown class="color-scheme-selector" title="Press \ to toggle">
<wa-button slot="trigger" id="color-scheme-selector-trigger" appearance="plain">
<wa-icon class="only-light" name="sun-bright" variant="regular"></wa-icon>
<wa-icon class="only-dark" name="moon-stars" variant="regular"></wa-icon>
<wa-icon name="sun-bright" variant="regular" class="icon-embiggen only-light"></wa-icon>
<wa-icon name="moon-stars" variant="regular" class="icon-embiggen only-dark"></wa-icon>
</wa-button>
<wa-dropdown-item value="light">
<wa-icon slot="icon" name="sun-bright" variant="regular"></wa-icon>
<wa-icon slot="icon" name="sun-bright" variant="regular" class="icon-embiggen"></wa-icon>
Light
</wa-dropdown-item>
<wa-dropdown-item value="dark">
<wa-icon slot="icon" name="moon-stars" variant="regular"></wa-icon>
<wa-icon slot="icon" name="moon-stars" variant="regular" class="icon-embiggen"></wa-icon>
Dark
</wa-dropdown-item>
<wa-divider></wa-divider>
<wa-dropdown-item value="auto">
<wa-icon class="only-light" slot="icon" name="sun-bright" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="icon" name="moon-stars" variant="regular"></wa-icon>
<wa-icon slot="icon" name="sun-bright" variant="regular" class="only-light icon-embiggen"></wa-icon>
<wa-icon slot="icon" name="moon-stars" variant="regular" class="only-dark icon-embiggen"></wa-icon>
System
</wa-dropdown-item>
</wa-dropdown>

4
packages/webawesome/docs/_includes/github-icon-buttons.njk
View File

@@ -1,8 +1,8 @@
<wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="plain">
<wa-icon family="brands" name="github" label="View Repository on GitHub"></wa-icon>
<wa-icon family="brands" name="github" label="View Repository on GitHub" class="icon-embiggen"></wa-icon>
</wa-button>
<wa-tooltip for="github-repo-button" distance="2">View on GitHub</wa-tooltip>
<wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="plain">
<wa-icon name="star" variant="regular" label="Star Repository on GitHub"></wa-icon>
<wa-icon name="star" variant="regular" label="Star Repository on GitHub" class="icon-embiggen"></wa-icon>
</wa-button>
<wa-tooltip for="github-star-button" distance="2">Star on GitHub</wa-tooltip>

2
packages/webawesome/docs/_includes/theme-selector.njk
View File

@@ -1,6 +1,6 @@
<wa-dropdown class="theme-selector" title="Select Theme">
<wa-button slot="trigger" id="theme-selector-trigger" appearance="plain">
<wa-icon name="paintbrush" variant="regular"></wa-icon>
<wa-icon name="paintbrush" variant="regular" class="icon-embiggen"></wa-icon>
</wa-button>
{# Free themes #}

33
packages/webawesome/docs/assets/styles/docs.css
View File

@@ -5,6 +5,7 @@
@import 'search.css';
@import 'cera-typeface.css';
@import 'theme-icons.css';
@import 'utils.css';
:root {
--wa-brand-orange: #f36944;
@@ -69,13 +70,6 @@ wa-page > header {
padding-inline: 0.875rem;
}
}
/* increasing visual size of icons-only within buttons */
wa-button[appearance='plain'] {
> wa-icon {
font-size: round(1.125em, 1px);
}
}
}
#sidebar,
@@ -156,13 +150,6 @@ wa-page > header {
margin-block-end: var(--wa-space-m);
}
/* Pro badges */
wa-badge.pro {
color: white;
background-color: var(--wa-brand-orange);
border-color: var(--wa-brand-orange);
}
#sidebar {
h2 {
color: var(--wa-color-text-quiet);
@@ -368,24 +355,6 @@ h1.title {
}
}
/* Search trigger */
wa-button#search-trigger {
&::part(base) {
background-color: var(--wa-form-control-background-color);
border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
box-shadow: none;
}
&::part(label) {
text-align: start;
width: 100%;
}
}
#search-trigger kbd {
font-size: var(--wa-font-size-2xs);
line-height: var(--wa-form-control-value-line-height);
padding-inline: 0.33em;
}
/* Search list pages */
wa-page > main:has(> .search-list) {
max-width: 120ch;

130
packages/webawesome/docs/assets/styles/utils.css Normal file
View File

@@ -0,0 +1,130 @@
/* Monorepo Styles
* These styles include elements that are shared across this repo as well as others included in the Web Awesome monorepo
*/
@layer wa-utils {
:root {
/* max-width for fixed width app-based pages */
--content-width-l: 132ch;
--content-width-m: 110ch;
--content-width-s: 80ch;
--content-width-xs: 50ch;
--content-padding-inline: 4ch;
--content-flow-spacing: 8ch;
--line-length-xs: 30ch;
--line-length-s: 45ch;
--line-length-m: 66ch;
--line-length-l: 77ch;
--line-length-xl: 90ch;
--line-length-none: none;
}
/* #region brand utilities */
.logo-webawesome {
color: var(--wa-brand-orange);
}
/* #endregion */
/* #region layout utilities */
.content-container {
margin-inline: auto;
max-width: var(--max-width, var(--content-width-l));
padding-inline: var(--content-padding-inline);
}
/* #endregion */
/* #region Text utilities */
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* line-length */
.line-length {
max-width: var(--line-length, none);
}
.line-length-xs {
--line-length: var(--line-length-xs);
}
.line-length-s {
--line-length: var(--line-length-s);
}
.line-length-m {
--line-length: var(--line-length-m);
}
.line-length-l {
--line-length: var(--line-length-l);
}
.line-length-xl {
--line-length: var(--line-length-xl);
}
.line-length-none {
--line-length: none;
}
/* #endregion */
/* #region shared UI */
/* pro badge */
wa-badge.pro {
color: white;
background-color: var(--wa-brand-orange);
border-color: var(--wa-brand-orange);
}
/* search trigger */
wa-button#search-trigger {
&::part(base) {
background-color: var(--wa-form-control-background-color);
border: var(--wa-form-control-border-width) var(--wa-form-control-border-style)
var(--wa-form-control-border-color);
box-shadow: none;
}
&::part(label) {
text-align: start;
width: 100%;
}
}
#search-trigger kbd {
font-size: var(--wa-font-size-2xs);
line-height: var(--wa-form-control-value-line-height);
padding-inline: 0.33em;
}
/* #endregion */
/* #region funsies */
/* buttons with icon toggle on hover */
wa-button .icon-hover {
display: none;
}
wa-button:hover .icon-default {
display: none;
}
wa-button:hover .icon-hover {
display: inline-flex;
}
/* #endregion */
/* #region resets */
code.appearance-plain {
background: transparent;
border: none;
}
a.appearance-plain {
--wa-color-text-link: var(--wa-color-text-normal);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
/* increasing visual size of icons in certain contexts (such as in plain buttons) */
wa-icon.icon-embiggen {
font-size: round(1.125em, 1px);
}
/* #endregion */
}