From 85b32608fcd8702cc9d3a4761db778f4e81ad8ff Mon Sep 17 00:00:00 2001 From: Brian Taylor Vann Date: Tue, 10 May 2022 15:31:26 -0700 Subject: [PATCH 1/4] correct demo colors, remove rect in tutorial --- .../svg-templates/00/before/index.html | 2 +- .../tutorials/content/svg-templates/03.md | 2 +- .../tutorials/content/svg-templates/04.md | 2 +- .../tutorials/content/svg-templates/05.md | 21 +++++++------------ 4 files changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html index bf045eb09..7e65eea35 100644 --- a/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html @@ -76,8 +76,8 @@ - + diff --git a/packages/lit-dev-content/site/tutorials/content/svg-templates/03.md b/packages/lit-dev-content/site/tutorials/content/svg-templates/03.md index 92433bf4b..885222c25 100644 --- a/packages/lit-dev-content/site/tutorials/content/svg-templates/03.md +++ b/packages/lit-dev-content/site/tutorials/content/svg-templates/03.md @@ -37,7 +37,7 @@ const helloTile = svg` clip-path="url(#rect-clip)" width="300" height="300" - fill="#000"> + fill="#000000"> ``` diff --git a/packages/lit-dev-content/site/tutorials/content/svg-templates/04.md b/packages/lit-dev-content/site/tutorials/content/svg-templates/04.md index 6c9731fe1..f9abe1c6b 100644 --- a/packages/lit-dev-content/site/tutorials/content/svg-templates/04.md +++ b/packages/lit-dev-content/site/tutorials/content/svg-templates/04.md @@ -92,7 +92,7 @@ render() { return html` ... - + `; diff --git a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md index 80b61edd5..598ad3c87 100644 --- a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md +++ b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md @@ -12,19 +12,14 @@ CSS applies attributes to HTML. However, only [SVG presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) can be applied to SVG through CSS. -In the following example, all `` elements will be as wide as -their parent element while elements using the class `background` will -have a black fill. +In the following example, elements using the class `background` will apply +a black fill. ```ts const helloSvgCss = css` - rect { - width: 100%; - } - .background { - fill: #000; + fill: #000000; } `; ``` @@ -68,7 +63,7 @@ const svgCSS = css` } text { - fill: #fff; + fill: #ffffff; dominant-baseline: hanging; font-family: monospace; font-size: 24px; @@ -90,11 +85,11 @@ representing the required theme. ```ts const themeCSS = css` .background { - fill: var(--background-color, #000); + fill: var(--background-color, #000000); } text { - fill: var(--font-color, #fff); + fill: var(--font-color, #ffffff); font-size: var(--font-size, 26px); stroke-width: var(--stroke-width, 1.2px); stroke: var(--stroke-color, #eee); @@ -147,8 +142,8 @@ Finally add CSS custom properties to the styles in `index.html` to theme ```css :root { - --background-color: #000; - --font-color: #fff; + --background-color: #000000; + --font-color: #ffffff; --font-size: 26px; --stroke-width: 1.2px; --stroke-color: #7acbf1; From 91e04109015ef0ff8718d3b0a42cda344bfd0467 Mon Sep 17 00:00:00 2001 From: Brian Taylor Vann Date: Tue, 10 May 2022 15:45:06 -0700 Subject: [PATCH 2/4] consistent colors through tutorial sections --- .../site/tutorials/content/svg-templates/05.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md index 598ad3c87..28366a2ce 100644 --- a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md +++ b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md @@ -12,8 +12,9 @@ CSS applies attributes to HTML. However, only [SVG presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) can be applied to SVG through CSS. -In the following example, elements using the class `background` will apply -a black fill. +In the following example, all `` elements will be as wide as +their parent element while elements using the class `background` will +have a black fill. ```ts @@ -92,7 +93,7 @@ const themeCSS = css` fill: var(--font-color, #ffffff); font-size: var(--font-size, 26px); stroke-width: var(--stroke-width, 1.2px); - stroke: var(--stroke-color, #eee); + stroke: var(--stroke-color, #eeeeee); } `; ``` @@ -146,7 +147,7 @@ Finally add CSS custom properties to the styles in `index.html` to theme --font-color: #ffffff; --font-size: 26px; --stroke-width: 1.2px; - --stroke-color: #7acbf1; + --stroke-color: #eeeeee; font-family: 'Open Sans', sans-serif; font-size: 1.5em; From d8293627790511a4f903688bd9de11c59e7e351e Mon Sep 17 00:00:00 2001 From: Brian Taylor Vann Date: Tue, 10 May 2022 16:00:17 -0700 Subject: [PATCH 3/4] remove mention of rect styling --- .../site/tutorials/content/svg-templates/05.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md index 28366a2ce..eff26d6d2 100644 --- a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md +++ b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md @@ -12,11 +12,9 @@ CSS applies attributes to HTML. However, only [SVG presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) can be applied to SVG through CSS. -In the following example, all `` elements will be as wide as -their parent element while elements using the class `background` will +In the following example, all elements using the class `background` will have a black fill. - ```ts const helloSvgCss = css` .background { From 85249dcdfa21b02e0ca652f001716b7a9bbdcded Mon Sep 17 00:00:00 2001 From: Brian Taylor Vann Date: Tue, 10 May 2022 16:12:26 -0700 Subject: [PATCH 4/4] consistent colors in examples --- .../lit-dev-content/site/tutorials/content/svg-templates/05.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md index eff26d6d2..fa20b903d 100644 --- a/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md +++ b/packages/lit-dev-content/site/tutorials/content/svg-templates/05.md @@ -38,7 +38,7 @@ HTML counterpart. ```ts const helloCssCustomProperties = css` .background { - fill: var(--background-color, #ff8800); + fill: var(--background-color, #000000); } `; ```