docs(css): include styles from sources instead of copypasting them al…

…l over

_site/scss/examples/bar.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-bar");

_site/scss/examples/column.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-column");

_site/scss/examples/columns.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-column-multiple");

_site/scss/examples/donut.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-donut");

_site/scss/examples/line.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-line");

_site/scss/examples/lines.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-points");

_site/scss/examples/pie.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-pie");

_site/scss/examples/polar.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-polar");

_site/scss/examples/radar.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-radar");

_site/scss/examples/radars.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-radar-multiple");

_site/scss/examples/waterfall.scss

@@ -0,0 +1,2 @@
+@use "sass:meta";
+@include meta.load-css("../../../src/chaarts-waterfall");

_site/templates/bar-charts.njk

@@ -128,7 +128,9 @@
 	</details>
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
-		<div>{% include 'includes/_bar-styles.njk' %}</div>
+		<div>
+			<pre><code class="language-css">{% include 'css/examples/bar.css' %}</code></pre>
+		</div>
 	</details>
 
 	<h2>Waterfall</h2>
@@ -190,7 +192,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'includes/styles.scss' %}</code></pre>
+			<pre><code class="language-css">{% include 'css/examples/waterfall.css' %}</code></pre>
 		</div>
 	</details>
 {% endblock %}

_site/templates/column-charts.njk

@@ -115,7 +115,9 @@
 	</details>
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
-		<div>{% include 'includes/_column-styles.njk' %}</div>
+		<div>
+			<pre><code class="language-css">{% include 'css/examples/column.css' %}</code></pre>
+		</div>
 	</details>
 
 	<h2>Multiple columns</h2>
@@ -237,6 +239,8 @@
 	</details>
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
-		<div>{% include 'includes/_columns-styles.njk' %}</div>
+		<div>
+			<pre><code class="language-css">{% include 'css/examples/columns.css' %}</code></pre>
+		</div>
 	</details>
 {% endblock %}

_site/templates/css/examples/bar.css

@@ -0,0 +1,86 @@
+.chaarts.bar {
+  --offset: 12.5em;
+}
+
+.chaarts.bar caption {
+  text-align: initial;
+  text-indent: calc(var(--offset) + 1rem);
+}
+
+.chaarts.bar tr {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-row-gap: 0.5rem;
+  grid-template-columns: minmax(min-content, var(--offset)) repeat(var(--scale, 100), minmax(0, 1fr)) 10ch;
+  transition: opacity 0.2s var(--move);
+}
+
+.chaarts.bar tr:nth-of-type(1n + 1) {
+  --background: var(--checkers);
+}
+
+.chaarts.bar tr:nth-of-type(2n + 2) {
+  --background: var(--hexagons);
+}
+
+.chaarts.bar tr:nth-of-type(3n + 3) {
+  --background: var(--triangles);
+}
+
+.chaarts.bar tr:nth-of-type(4n + 4) {
+  --background: var(--zig);
+}
+
+.chaarts.bar tr:nth-of-type(5n + 5) {
+  --background: var(--stripes);
+}
+
+.chaarts.bar tr:nth-of-type(6n + 6) {
+  --background: var(--dots);
+}
+
+.chaarts.bar th {
+  grid-column: 1/1;
+  margin: 0.5rem 0 0;
+  padding: 0 1rem 0 0;
+  text-align: end;
+}
+
+.chaarts.bar td {
+  --size: calc(var(--scale, 100) * 100%);
+  --position: calc(var(--value, 0) / var(--scale, 100) * 100%);
+  background: linear-gradient(to right, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) var(--position) 0% / var(--size) 100%, var(--background) center/contain;
+  background-blend-mode: hard-light;
+  grid-column: 2 / var(--value, 0);
+  margin: 0.5rem 0 0;
+  position: relative;
+}
+
+.chaarts.bar span {
+  background: inherit;
+  background-clip: text;
+  color: transparent;
+  font-weight: bold;
+  inset-inline-start: 100%;
+  line-height: 1.5;
+  position: absolute;
+}
+
+.chaarts.bar:hover tr {
+  opacity: 0.5;
+}
+
+.chaarts.bar:hover tr:hover {
+  opacity: 1;
+}
+
+@media (prefers-contrast: more) {
+  .chaarts.bar td {
+    background: var(--chaarts-blue);
+  }
+  .chaarts.bar span {
+    background: var(--background-lighter);
+    background-clip: unset;
+    color: var(--chaarts-blue);
+  }
+}

_site/templates/css/examples/column.css

@@ -0,0 +1,189 @@
+.chaarts[class*=column] {
+  --gap: 0.5rem;
+  --size: calc(var(--scale, 100) * 100%);
+  --width: calc(64em / var(--y) - 1rem);
+  display: grid;
+  grid-column-gap: var(--gap);
+  max-block-size: 64em;
+  position: relative;
+}
+
+.chaarts[class*=column] td,
+.chaarts[class*=column] th {
+  margin: 0;
+}
+
+.chaarts[class*=column] tr > * + * {
+  text-align: center;
+}
+
+.chaarts[class*=column] tr,
+.chaarts[class*=column] tbody,
+.chaarts[class*=column] thead {
+  display: contents;
+}
+
+.chaarts[class*=column] caption {
+  grid-column: 1/span var(--y);
+  grid-row: -1;
+}
+
+.chaarts[class*=column] td {
+  --integer: calc(var(--value));
+  grid-row: calc(var(--scale, 100) + 2 - var(--integer)) / -2;
+  pointer-events: none;
+  position: relative;
+  transition: opacity 0.2s var(--move);
+}
+
+.chaarts[class*=column] td:nth-of-type(1) {
+  grid-column: 2;
+}
+
+.chaarts[class*=column] td:nth-of-type(2) {
+  grid-column: 3;
+}
+
+.chaarts[class*=column] td:nth-of-type(3) {
+  grid-column: 4;
+}
+
+.chaarts[class*=column] td:nth-of-type(4) {
+  grid-column: 5;
+}
+
+.chaarts[class*=column] td:nth-of-type(5) {
+  grid-column: 6;
+}
+
+.chaarts[class*=column] td:nth-of-type(6) {
+  grid-column: 7;
+}
+
+.chaarts[class*=column] td:nth-of-type(7) {
+  grid-column: 8;
+}
+
+.chaarts[class*=column] td:nth-of-type(8) {
+  grid-column: 9;
+}
+
+.chaarts[class*=column] td:nth-of-type(9) {
+  grid-column: 10;
+}
+
+.chaarts[class*=column] td:nth-of-type(10) {
+  grid-column: 11;
+}
+
+.chaarts[class*=column] span {
+  background: inherit;
+  background-clip: text;
+  color: transparent;
+  font-weight: bold;
+  inset-block-end: 100%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  line-height: 1.5;
+  pointer-events: auto;
+  position: absolute;
+}
+
+@media (prefers-contrast: more) {
+  .chaarts[class*=column] span {
+    background: var(--background-lighter);
+    background-clip: unset;
+    color: var(--chaarts-blue);
+  }
+}
+.chaarts.column-single {
+  grid-auto-columns: 1fr;
+  grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, 0.25rem)) minmax(min-content, 2rem);
+}
+
+.chaarts.column-single tbody th {
+  grid-column: 1;
+  grid-row: -6/-3;
+  line-height: 1;
+}
+
+.chaarts.column-single thead * {
+  grid-row: -2;
+}
+
+.chaarts.column-single td {
+  --position: calc(var(--integer, 0) / var(--scale, 100) * 100%);
+  background: linear-gradient(to top, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) 0% var(--position) / 100% var(--size), var(--background) center/1rem;
+  background-blend-mode: hard-light;
+}
+
+.chaarts.column-single td:nth-of-type(1n + 1) {
+  --background: var(--checkers);
+}
+
+.chaarts.column-single td:nth-of-type(2n + 2) {
+  --background: var(--hexagons);
+}
+
+.chaarts.column-single td:nth-of-type(3n + 3) {
+  --background: var(--triangles);
+}
+
+.chaarts.column-single td:nth-of-type(4n + 4) {
+  --background: var(--zig);
+}
+
+.chaarts.column-single td:nth-of-type(5n + 5) {
+  --background: var(--stripes);
+}
+
+.chaarts.column-single td:nth-of-type(6n + 6) {
+  --background: var(--dots);
+}
+
+@media (prefers-contrast: more) {
+  .chaarts.column-single td {
+    background-color: var(--chaarts-blue);
+  }
+}
+.chaarts.column-single :is([scope=col], [scope=colgroup])::after {
+  background: var(--background) var(--stripes);
+  background-blend-mode: exclusion;
+  content: "";
+  inline-size: var(--width);
+  inset-block-end: 4rem;
+  inset-block-start: 1rem;
+  mix-blend-mode: color;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.3s var(--move);
+  z-index: 0;
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):hover::after {
+  opacity: 0.5;
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):nth-child(2)::after {
+  inset-inline-start: calc(1em + var(--width) * 1 + var(--gap) * 1);
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):nth-child(3)::after {
+  inset-inline-start: calc(1em + var(--width) * 2 + var(--gap) * 2);
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):nth-child(4)::after {
+  inset-inline-start: calc(1em + var(--width) * 3 + var(--gap) * 3);
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):nth-child(5)::after {
+  inset-inline-start: calc(1em + var(--width) * 4 + var(--gap) * 4);
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):nth-child(6)::after {
+  inset-inline-start: calc(1em + var(--width) * 5 + var(--gap) * 5);
+}
+
+.chaarts.column-single :is([scope=col], [scope=colgroup]):nth-child(7)::after {
+  inset-inline-start: calc(1em + var(--width) * 6 + var(--gap) * 6);
+}