From 336a3acdd0d7386bdbd2d2638c605526c3611e13 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 26 Sep 2025 14:35:19 -0400 Subject: [PATCH] Docs: Add Shared Monorepo Utils + DRY Out Styling (#1497) * 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 --- packages/webawesome/docs/_includes/base.njk | 3 +- .../docs/_includes/color-scheme-selector.njk | 12 +- .../docs/_includes/github-icon-buttons.njk | 4 +- .../docs/_includes/theme-selector.njk | 2 +- .../webawesome/docs/assets/styles/docs.css | 33 +---- .../webawesome/docs/assets/styles/utils.css | 130 ++++++++++++++++++ 6 files changed, 142 insertions(+), 42 deletions(-) create mode 100644 packages/webawesome/docs/assets/styles/utils.css diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk index 0426eadcd..722bf2faf 100644 --- a/packages/webawesome/docs/_includes/base.njk +++ b/packages/webawesome/docs/_includes/base.njk @@ -41,7 +41,8 @@
{# Nav toggle #} - + + {# Logo - Desktop #} diff --git a/packages/webawesome/docs/_includes/color-scheme-selector.njk b/packages/webawesome/docs/_includes/color-scheme-selector.njk index 0801ccbf4..cf98b13ec 100644 --- a/packages/webawesome/docs/_includes/color-scheme-selector.njk +++ b/packages/webawesome/docs/_includes/color-scheme-selector.njk @@ -1,20 +1,20 @@ - - + + - + Light - + Dark - - + + System diff --git a/packages/webawesome/docs/_includes/github-icon-buttons.njk b/packages/webawesome/docs/_includes/github-icon-buttons.njk index 5d28e6ff9..0b023f0c4 100644 --- a/packages/webawesome/docs/_includes/github-icon-buttons.njk +++ b/packages/webawesome/docs/_includes/github-icon-buttons.njk @@ -1,8 +1,8 @@ - + View on GitHub - + Star on GitHub diff --git a/packages/webawesome/docs/_includes/theme-selector.njk b/packages/webawesome/docs/_includes/theme-selector.njk index f6b4bb3b1..bab0dab6e 100644 --- a/packages/webawesome/docs/_includes/theme-selector.njk +++ b/packages/webawesome/docs/_includes/theme-selector.njk @@ -1,6 +1,6 @@ - + {# Free themes #} diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 4476bcfb2..153246083 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -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; diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css new file mode 100644 index 000000000..ed5aefa28 --- /dev/null +++ b/packages/webawesome/docs/assets/styles/utils.css @@ -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 */ +}