From 48fc9d97791c320d65e009792ca127ff26fd81fb Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Mon, 9 Dec 2024 22:31:44 -0500 Subject: [PATCH 1/6] touch up header and sidebar spacing --- docs/_includes/base.njk | 2 +- docs/assets/styles/docs.css | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 96f40c151..685927375 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -76,7 +76,7 @@ {# Logo #}
{# Nav toggle #} - + diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index c91f2d48b..f014c59de 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -38,9 +38,7 @@ wa-page > header { display: flex; align-items: center; justify-content: space-between; - height: 4rem; - padding-inline-start: var(--wa-space-m); - padding-inline-end: var(--wa-space-s); + padding-inline: var(--wa-space-xl); a[href='/'] { color: var(--wa-color-text-normal); @@ -49,6 +47,7 @@ wa-page > header { wa-button[data-toggle-nav] { --label-color: currentColor; + font-size: 1rem; margin-inline-start: -0.875rem; margin-inline-end: 0; @@ -96,11 +95,10 @@ wa-page > header { #outline { h2 { font-size: var(--wa-font-size-m); - margin-block-end: var(--wa-space-m); - - &:not(:first-of-type) { - margin-block-start: var(--wa-space-xl); - } + margin: 0; + } + h2:not(:first-child) { + margin-block-start: var(--wa-space-xs); } ul { border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border); @@ -114,7 +112,9 @@ wa-page > header { } li { list-style: none; - margin-block-end: var(--wa-space-m); + } + li + li { + margin-block-start: var(--wa-space-m); } li a { color: var(--wa-color-text-normal); From 9bbfa1aeb2250c9ace0766ba7b36762fddcd8c17 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Mon, 9 Dec 2024 22:49:14 -0500 Subject: [PATCH 2/6] add page card to components overview --- docs/_includes/svgs/page.njk | 9 +++++++++ docs/docs/components/index.md | 10 +++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 docs/_includes/svgs/page.njk diff --git a/docs/_includes/svgs/page.njk b/docs/_includes/svgs/page.njk new file mode 100644 index 000000000..6351785ba --- /dev/null +++ b/docs/_includes/svgs/page.njk @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/docs/components/index.md b/docs/docs/components/index.md index 6c53ce82e..bf97f4b40 100644 --- a/docs/docs/components/index.md +++ b/docs/docs/components/index.md @@ -315,13 +315,21 @@ layout: page-outline - +
{% include "svgs/drawer.njk" %}
Drawer + + +
+ {% include "svgs/page.njk" %} +
+ Page + +
From 0a980addc34474da94b9cc2172ea8c3970ce3210 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Mon, 9 Dec 2024 22:50:24 -0500 Subject: [PATCH 3/6] remove duplicate heading, link Theming heading --- docs/_includes/sidebar.njk | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 5f8ba90c0..876845c83 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -233,7 +233,6 @@ {# Layout #} {% if not isAlpha %} -

Layout

Layout @@ -273,11 +272,12 @@ {% endif %} {# Theming #} -

Theming

+

+ Theming + + +

    -
  • - Theming Overview -
  • Color
    • From 5e6b8628d4c6ca63e3c96fbebb914c7243daae3f Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 10 Dec 2024 01:29:24 -0500 Subject: [PATCH 4/6] =?UTF-8?q?We=20don=E2=80=99t=20use=20Liquid!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.eleventy.js | 1 + docs/docs/theming/color.md | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 054e4bafe..d68c3cd2d 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -146,6 +146,7 @@ export default function (eleventyConfig) { // } return { + markdownTemplateEngine: 'njk', dir: { includes: '_includes', layouts: '_layouts' diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index 8faa41b44..7ab0e7a6b 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -65,7 +65,7 @@ Lightness values on this scale have a strong correlation to [relative luminance] - A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA) - A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA) -Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{name}-{#}`. +Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
    Red
      @@ -549,4 +549,4 @@ Finally, each color is named according to how much attention it draws. Here, we swatch.appendChild(copyButton) }) - \ No newline at end of file + From 22ca715ddb72f19b007388b25f450973d83a6320 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 10 Dec 2024 04:45:13 -0500 Subject: [PATCH 5/6] Fix missing content issue, closes #198 --- src/themes/applied.css | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/themes/applied.css b/src/themes/applied.css index 7cecc5293..fc4438cf3 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -43,15 +43,23 @@ body { -webkit-text-size-adjust: none; } -/* Show custom elements only after they're registered */ -:where(:not(:defined, [did-ssr])), -:where(:not(:defined, [did-ssr])) * { - opacity: 0; +@keyframes wa-fade-in { + from { + opacity: 0; + } } -:where(:defined) { - opacity: 1; - transition: 0.1s opacity; +/* Show custom elements only after they're registered */ +:where(:not(:defined, [did-ssr])) { + &, + & * { + /* + * if an element gets defined earlier than 400ms, the animation stops applying so it just appears (no fade) + * If it takes somewhere between 400 and 600 ms, then you may get an interrupted fade, but oh well + * If an element takes longer than 600ms to get defined, it fades in over 200ms + */ + animation: 200ms 400ms wa-fade-in both; + } } /* Content flow */ From fd3ec885f9fff6f9bcb2d70c8a61a69d65ca0a05 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 10 Dec 2024 04:50:36 -0500 Subject: [PATCH 6/6] [viewport-demp] Parts for zoom buttons, zoom cursors --- src/components/viewport-demo/viewport-demo.styles.ts | 10 ++++++++++ src/components/viewport-demo/viewport-demo.ts | 8 ++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/viewport-demo/viewport-demo.styles.ts b/src/components/viewport-demo/viewport-demo.styles.ts index 696bd4066..b983cdae0 100644 --- a/src/components/viewport-demo/viewport-demo.styles.ts +++ b/src/components/viewport-demo/viewport-demo.styles.ts @@ -109,4 +109,14 @@ export default css` opacity: 80%; } } + + [part~='zoom-in'], + [part~='zoom-in']::part(base) { + cursor: zoom-in; + } + + [part~='zoom-out'], + [part~='zoom-out']::part(base) { + cursor: zoom-out; + } `; diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts index fccbc2317..984f40e7b 100644 --- a/src/components/viewport-demo/viewport-demo.ts +++ b/src/components/viewport-demo/viewport-demo.ts @@ -291,9 +291,13 @@ export default class WaViewportDemo extends WebAwesomeElement { ${dimensions} - this.zoomOut()}>- + this.zoomOut()} part="zoom-out button" + >- ${Math.round(this.computedZoom * 100)}% - this.zoomIn()}>+ + this.zoomIn()} part="zoom-in button" + >+