From 7a7a6ba2d12fc667e092410b2215e13dde425980 Mon Sep 17 00:00:00 2001 From: Scott Rhamy Date: Tue, 30 Dec 2025 18:17:56 -0500 Subject: [PATCH 01/11] Styles - 2nd pass --- docs/src/routes/docs/guides/styles/+page.md | 234 +++++++++++++++++- .../docs/guides/styles/color-schemes.svelte | 40 +++ .../routes/docs/guides/styles/padding.svelte | 221 +++++++++++++++++ 3 files changed, 493 insertions(+), 2 deletions(-) create mode 100644 docs/src/routes/docs/guides/styles/color-schemes.svelte create mode 100644 docs/src/routes/docs/guides/styles/padding.svelte diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md index 0d5e1e127..83e38f951 100644 --- a/docs/src/routes/docs/guides/styles/+page.md +++ b/docs/src/routes/docs/guides/styles/+page.md @@ -1,3 +1,233 @@ -# Styles +# Styling -> TODO +## Colors + +Colors represent the main style requirement for Layerchart. + +Instead of requiring explicit color props for each element, LayerChart leverages CSS’s [CSS currentColor](https://www.digitalocean.com/community/tutorials/css-currentcolor) under the hood. This allows developers to style charts using familiar, standard CSS color utilities, rather than targeting different attributes for each rendering layer (svg, canvas, or html). + +Color is simply inherited and propagated through the component tree, and LayerChart automatically applies it appropriately for each display layer—using `fill` or `stroke` for SVG, `fillStyle`, `fillRect` for canvas, and `color` or `background-color` for HTML. + +If you can think of a way to define a color, Layerchart probably [supports it](#inline-option-overrides)! + +`"Canvas supports all" here? Not sure what text should be. ` + +### Global CSS colors + +Apply a Layerchart base "theme" in app.css to globally style base elements of your charts including primary color of chart visualization (ie line of LineChart), backgrounds, axises and text content. + +#### User defined global CSS colors + +:::tip +If you are not seeing the chart, or it is colored incorrectly, then the probably likely residesing in this file. Debug cia browser devtools to see CSS color variables. +::: + + +```css title="app.css" +.lc-root-container { + /* Default marks color when not using explicit color or color scale */ + --color-primary: var(--color-blue-500); + + /* Progressively darker shades representing surfaces (backgrounds). */ + --color-surface-30: var(--color-white); + --color-surface-200: var(--color-gray-30); + --color-surface-300: var(--color-gray-300); + + /* Content (text) color */ + --color-surface-content: var(--color-gray-900); +} +``` + +#### Third party UI taiwindcss frameworks assigned colors + +If you're already using one of these CSS UI frameworks with themes, use one of these built in integrations to translate the chosen theme into layerchart colors. + +:::tabs{key="framework"} + + ::tab{label="shadcn-svelte" icon="custom-brands:shadcnsvelte"} + ```css title="app.css" + @import 'layerchart/shadcn-svelte.css'; + ``` + :: + + + ::tab{label="Skeleton" icon="custom-brands:skeleton"} + ```css title="app.css" + /* v3 */ + @import 'layerchart/skeleton-3.css'; + + /* v4 */ + @import 'layerchart/skeleton-4.css'; + ``` + :: + + ::tab{label="Svelte UX" icon="custom-brands:svelteux"} + ```css title="app.css" + /* Works out of the box! */ + ``` + :: + + ::tab{label="daisyUI" icon="custom-brands:daisyUI"} + ```css title="app.css" + @import 'layerchart/daisyui-5.css'; + ``` + :: + +::: + +### User Defined Options + +#### Inline Option Overrides via Native attributes + +::tip +Inline options are recommended for one-off color definitions. Use [global options](#global-css-colors) for base colors. +:: + +:::tabs{key="framework"} + + ::tab{label="Tailwind / UnoCSS"} + Here the color is set via HTML class attribute supporting tailwindcss and unoCSS. + ```svelte live {8} + + + + + + + + ``` + :: + + ::tab{label="CSS Variables"} + Here the color is set via a class using CSS variables. + ```svelte live {8} + + + + + + + + ``` + :: + + ::tab{label="Vanilla CSS"} + Here the color is set via HTML style attribute. + ```svelte live {8} + + + + + + + + ``` + :: + + ::tab{label="SVG style attributes"} + Here the color is set via [SVG Attributes]("https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute") such as `stroke`, `fill`, `strokeWidth`. + + ```svelte live {8} + + + + + + + + ``` + :: +::: + +#### Component class props using Tailwind/UnoCSS + +All components accepts a class prop for styling, and this is the most common why to define colors for your chart components. In this example the color is set via a class prop on AnnotationPoint. + +:example{ component="AnnotationPoint" name="series-annotation" showCode noResize showLineNumbers } +`ADD LINE HIGHLIGHTING {26-27}` + + +#### Color Schemes via cRange + +Picking a color isn't easy. Picking many colors that appear cohesive is even tougher. Why not use designer crafted color schemes? + +::info +more info [Color Schemes](https://techniq-docs-v2.layerchart.pages.dev/docs/components/ColorRamp#schemes) +:: + +:example{ path="./color-schemes.svelte" noResize showCode } +`ADD LINE HIGHLIGHTING {40}` + +#### Data Driven Colors (choropleth, color prop on data for pie chart, etc) + +#### Color Enhancements + +:::tabs{key="color-enhancements"} + + ::tab{label="Linear gradient"} + `ADD LINE HIGHLIGHTING {11-15}` + :example{ component="AreaChart" name="gradient" noResize showCode } + :: + + ::tab{label="Radial gradient"} + ```svelte live {9} + + + + + + {#snippet children({ gradient })} + + {/snippet} + + + + ``` + `NOTE FIX triple backtick showing` + :: + + ::tab{label="Pattern"} + ADD LINE HIGHLIGHTING {14-20} + :example{ component="AnnotationRange" name="vertical-with-pattern-range" noResize showCode } + :: +::: + +## Padding + +Chart padding is the only other commonly styled element. +`Can xPadding and yPadding be added to example below?` + +:example{ path="./padding.svelte" noResize } +`WHY PADDING FOR LEGEND NOT HANDLED?` \ No newline at end of file diff --git a/docs/src/routes/docs/guides/styles/color-schemes.svelte b/docs/src/routes/docs/guides/styles/color-schemes.svelte new file mode 100644 index 000000000..6f73d4f2e --- /dev/null +++ b/docs/src/routes/docs/guides/styles/color-schemes.svelte @@ -0,0 +1,40 @@ + + + + + diff --git a/docs/src/routes/docs/guides/styles/padding.svelte b/docs/src/routes/docs/guides/styles/padding.svelte new file mode 100644 index 000000000..4f429144f --- /dev/null +++ b/docs/src/routes/docs/guides/styles/padding.svelte @@ -0,0 +1,221 @@ + + +
+ +
+ Customize Padding + Symmetric Padding +
+ + + +
+
+ + {#if paddingOption === 1} +
+ +
+ {:else} +
+ + + + +
+ {/if} + + +
+ + +
+ { + const color = colors[i]; + return { + label: species + ' 🐧', + key: species, + data, + color, + props: { + stroke: color, + fillOpacity: 0.3 + } + }; + })} + props={{ + xAxis: { + rule: true, + label: 'Flipper Length (mm)', + labelProps: { + dy: -(statePadding.bottom + 5) + } + }, + yAxis: { + rule: true, + label: 'Bill Length (mm)', + labelProps: { + dx: statePadding.left + 5 + } + } + }} + padding={defaultChartPadding({ + axis: axis, + legend: legend, + left: statePadding.left, + right: statePadding.right, + bottom: statePadding.bottom, + top: statePadding.top + })} + height={400} + /> +
From ea27b7b858a046a0872e907eaa2e2415bfc149a8 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 31 Dec 2025 14:47:41 -0500 Subject: [PATCH 02/11] Fix Example (leftover `path`) --- docs/src/lib/components/Example.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/lib/components/Example.svelte b/docs/src/lib/components/Example.svelte index 74d98d438..979c8f445 100644 --- a/docs/src/lib/components/Example.svelte +++ b/docs/src/lib/components/Example.svelte @@ -206,7 +206,7 @@ {/if} {:else}
- Example `{name ?? path}` + Example `{name}` {#if component} for `{component}` {/if} From 8df9827411252e2d98995d9323674f5a4bc4f361 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 31 Dec 2025 14:55:46 -0500 Subject: [PATCH 03/11] Improve indention and some style attributes --- docs/src/routes/docs/guides/styles/+page.md | 123 ++++++++++---------- 1 file changed, 61 insertions(+), 62 deletions(-) diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md index 83e38f951..32a7f3e04 100644 --- a/docs/src/routes/docs/guides/styles/+page.md +++ b/docs/src/routes/docs/guides/styles/+page.md @@ -2,7 +2,7 @@ ## Colors -Colors represent the main style requirement for Layerchart. +Colors represent the main style requirement for Layerchart. Instead of requiring explicit color props for each element, LayerChart leverages CSS’s [CSS currentColor](https://www.digitalocean.com/community/tutorials/css-currentcolor) under the hood. This allows developers to style charts using familiar, standard CSS color utilities, rather than targeting different attributes for each rendering layer (svg, canvas, or html). @@ -22,7 +22,6 @@ Apply a Layerchart base "theme" in app.css to globally style base elements of yo If you are not seeing the chart, or it is colored incorrectly, then the probably likely residesing in this file. Debug cia browser devtools to see CSS color variables. ::: - ```css title="app.css" .lc-root-container { /* Default marks color when not using explicit color or color scale */ @@ -88,25 +87,25 @@ Inline options are recommended for one-off color definitions. Use [global option ::tab{label="Tailwind / UnoCSS"} Here the color is set via HTML class attribute supporting tailwindcss and unoCSS. ```svelte live {8} - - - - - - - + + + + + + + ``` :: ::tab{label="CSS Variables"} - Here the color is set via a class using CSS variables. + Here the color is set via a class using CSS variables. ```svelte live {8} - - - - - - + + + + + + + ``` + :: + ::: #### Component class props using Tailwind/UnoCSS @@ -176,7 +175,6 @@ All components accepts a class prop for styling, and this is the most common why :example{ component="AnnotationPoint" name="series-annotation" showCode noResize showLineNumbers } `ADD LINE HIGHLIGHTING {26-27}` - #### Color Schemes via cRange Picking a color isn't easy. Picking many colors that appear cohesive is even tougher. Why not use designer crafted color schemes? @@ -194,34 +192,35 @@ more info [Color Schemes](https://techniq-docs-v2.layerchart.pages.dev/docs/comp :::tabs{key="color-enhancements"} - ::tab{label="Linear gradient"} + ::tab{label="Linear gradient"} `ADD LINE HIGHLIGHTING {11-15}` :example{ component="AreaChart" name="gradient" noResize showCode } - :: - - ::tab{label="Radial gradient"} - ```svelte live {9} - - - - - - {#snippet children({ gradient })} - - {/snippet} - - - - ``` + :: + + ::tab{label="Radial gradient"} + ```svelte live {9} + + + + + + {#snippet children({ gradient })} + + {/snippet} + + + + ``` `NOTE FIX triple backtick showing` - :: + :: - ::tab{label="Pattern"} + ::tab{label="Pattern"} ADD LINE HIGHLIGHTING {14-20} - :example{ component="AnnotationRange" name="vertical-with-pattern-range" noResize showCode } - :: + :example{ component="AnnotationRange" name="vertical-with-pattern-range" noResize showCode } + :: + ::: ## Padding @@ -230,4 +229,4 @@ Chart padding is the only other commonly styled element. `Can xPadding and yPadding be added to example below?` :example{ path="./padding.svelte" noResize } -`WHY PADDING FOR LEGEND NOT HANDLED?` \ No newline at end of file +`WHY PADDING FOR LEGEND NOT HANDLED?` From 9755768de87ab97ce04a5b9b54ecf196a475d992 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 31 Dec 2025 14:56:19 -0500 Subject: [PATCH 04/11] fix link --- docs/src/routes/docs/guides/styles/+page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md index 32a7f3e04..73385693c 100644 --- a/docs/src/routes/docs/guides/styles/+page.md +++ b/docs/src/routes/docs/guides/styles/+page.md @@ -8,7 +8,7 @@ Instead of requiring explicit color props for each element, LayerChart leverages Color is simply inherited and propagated through the component tree, and LayerChart automatically applies it appropriately for each display layer—using `fill` or `stroke` for SVG, `fillStyle`, `fillRect` for canvas, and `color` or `background-color` for HTML. -If you can think of a way to define a color, Layerchart probably [supports it](#inline-option-overrides)! +If you can think of a way to define a color, Layerchart probably [supports it](#user-defined-options)! `"Canvas supports all" here? Not sure what text should be. ` From 121f6a93f5acc056fd3ce4b9ba0068753a733a92 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 31 Dec 2025 14:58:13 -0500 Subject: [PATCH 05/11] Slightly simplify css variable example --- docs/src/routes/docs/guides/styles/+page.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md index 73385693c..bac595ee2 100644 --- a/docs/src/routes/docs/guides/styles/+page.md +++ b/docs/src/routes/docs/guides/styles/+page.md @@ -104,8 +104,8 @@ Inline options are recommended for one-off color definitions. Use [global option ``` :: - ::tab{label="CSS Variables"} - Here the color is set via a class using CSS variables. + ::tab{label="Vanilla CSS"} + Here the color is set via HTML style attribute. ```svelte live {8} - - {#each schemes as scheme} {/each} From 1b7c8b1feca19c706486e18bd43f6062b2c249a5 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Thu, 1 Jan 2026 18:01:53 -0500 Subject: [PATCH 10/11] Fix legend padding handling --- packages/layerchart/src/lib/utils/common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/layerchart/src/lib/utils/common.ts b/packages/layerchart/src/lib/utils/common.ts index 4d9ee873a..cbfd0721d 100644 --- a/packages/layerchart/src/lib/utils/common.ts +++ b/packages/layerchart/src/lib/utils/common.ts @@ -62,7 +62,7 @@ export function defaultChartPadding Date: Thu, 1 Jan 2026 18:07:35 -0500 Subject: [PATCH 11/11] Adjust padding example --- docs/src/routes/docs/guides/styles/+page.md | 34 +++++++++---------- .../routes/docs/guides/styles/padding.svelte | 6 ++-- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md index 4d08f5d06..f84da58aa 100644 --- a/docs/src/routes/docs/guides/styles/+page.md +++ b/docs/src/routes/docs/guides/styles/+page.md @@ -209,7 +209,7 @@ In this example we can target the `AnnotationPoint`'s internal `circle` and `lab Picking a color isn't easy. Picking many colors that appear cohesive is even tougher. Why not use designer crafted color schemes? ::info -more info [Color Schemes](https://techniq-docs-v2.layerchart.pages.dev/docs/components/ColorRamp#schemes) +more info [Color Schemes](/docs/components/ColorRamp#schemes) :: :example{ path="./color-schemes.svelte" noResize showCode highight="40" } @@ -225,22 +225,21 @@ more info [Color Schemes](https://techniq-docs-v2.layerchart.pages.dev/docs/comp :: ::tab{label="Radial gradient"} - ```svelte live {9} - - - - - - {#snippet children({ gradient })} - - {/snippet} - - - - ``` - `NOTE FIX triple backtick showing` + ```svelte live {7-10} + + + + + + {#snippet children({ gradient })} + + {/snippet} + + + + ``` :: ::tab{label="Pattern"} @@ -255,4 +254,3 @@ Chart padding is the only other commonly styled element. `Can xPadding and yPadding be added to example below?` :example{ path="./padding.svelte" noResize } -`WHY PADDING FOR LEGEND NOT HANDLED?` diff --git a/docs/src/routes/docs/guides/styles/padding.svelte b/docs/src/routes/docs/guides/styles/padding.svelte index 4f429144f..2313c0796 100644 --- a/docs/src/routes/docs/guides/styles/padding.svelte +++ b/docs/src/routes/docs/guides/styles/padding.svelte @@ -67,9 +67,9 @@ let paddingPseudoCode = $derived.by(() => { let code = []; let padding = ''; - if (!axis) code.push('axis:{false}'); - if (!legend) code.push('legend:{false}'); - if (!xNice) code.push('xNice:{false}'); + if (!axis) code.push('axis={false}'); + if (legend) code.push('legend'); + if (!xNice) code.push('xNice'); if (paddingOption === 0) { let pad = []; if (statePadding.left !== defaultPadding.left) pad.push(`left: ${statePadding.left}`);