diff --git a/docs/src/lib/utils/fruits.ts b/docs/src/lib/utils/fruits.ts deleted file mode 100644 index 109e63a95..000000000 --- a/docs/src/lib/utils/fruits.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const fruitColors = [ - 'var(--color-apples)', - 'var(--color-bananas)', - 'var(--color-cherries)', - 'var(--color-grapes)' -]; diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md index 4bd3b2de6..1f7607bcb 100644 --- a/docs/src/routes/docs/getting-started/+page.md +++ b/docs/src/routes/docs/getting-started/+page.md @@ -7,6 +7,7 @@ import Step from '$lib/components/Step.svelte'; import Tabs from '$lib/components/Tabs.svelte'; import Blockquote from '$lib/components/Blockquote.svelte'; + import ThirdParty from './ThirdParty.svelte'; import LucideGithub from '~icons/lucide/github'; import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz' @@ -98,27 +99,7 @@ Provides built-in first class support for provides theming conventions for many popular UI frameworks.

- - {#snippet content(value)} - {#if value === 0} - - {:else if value === 1} - - {:else if value === 2} - - {:else if value === 3} - - {:else if value === 4} - - {:else if value === 5} - - {/if} - {/snippet} - +

diff --git a/docs/src/routes/docs/getting-started/ThirdParty.svelte b/docs/src/routes/docs/getting-started/ThirdParty.svelte new file mode 100644 index 000000000..6b1a1162d --- /dev/null +++ b/docs/src/routes/docs/getting-started/ThirdParty.svelte @@ -0,0 +1,25 @@ + + + + {#snippet content(value)} + {#if value === 0} + + {:else if value === 1} + + {:else if value === 2} + + {:else if value === 3} + + {:else if value === 4} + + {:else if value === 5} + + {/if} + {/snippet} + diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md index 0d5e1e127..ff59851ea 100644 --- a/docs/src/routes/docs/guides/styles/+page.md +++ b/docs/src/routes/docs/guides/styles/+page.md @@ -1,3 +1,132 @@ -# Styles + + +# Styling + +## Colors + +Colors represent the main style requirement for Layerchart. If colors are not defined then you will be looking at a poorly styled, or even black chart component. If you can think of a way to define a color, Layerchart probably supports it! + +"Canvas supports all" here? Not sure what text should be. + +### Global CSS Colors + +The set it an forget it option for setting colors is to define it globally in app.css. + +#### User Defined + +```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 tailwindCSS integrations + +

+ or with a single .css import, Layerchart provides theming conventions for many popular UI frameworks. Just change your theme and your visualizations have sccess to their provided theme colors. +

+ + +### Inline Option Overrides + +> Note: Inline options are recommended for one-off color definitions. Use global options for base colors. + + + {#snippet content(value)} + {#if value === 0} + Here the color is set via HTML class attribute supporting tailwindcss and unoCSS. + + {:else if value === 1} + Here the color is set via a class using CSS variables. + + {:else if value === 2} + Here the color is set via HTML style attribute. + + {:else if value === 3} + Here the color is set via SVG attributes such as stroke, fill, strokeWidth. + + {:else if value === 4} + MAKE THIS WORK + currentColor is always used as the default color if no others are defined. + + {/if} + {/snippet} + + +### Component class props using Tailwind/UnoCSS + +Many components accepts a class prop for styling. Here colors are set via a class prop on AnnotationPoint. + + +### Color Schemes + +Picking a color isn't easy. Picking many colors that appear cohesive is even tougher. Why not use designer crafted color schemes? + +> more info [Color Schemes](https://techniq-docs-v2.layerchart.pages.dev/docs/components/ColorRamp#schemes) + + + + + {#snippet content(value)} + {#if value === 0} + Using cRange prop. + + {:else if value === 1} + Using c prop. + + {:else if value === 2} + Using colorScale + Note tab needs renamed, I don't understand this one + + {/if} + {/snippet} + + + +### Data Driven Colors (choropleth, color prop on data for pie chart, etc) + +### Color Enhancements + + + {#snippet content(value)} + {#if value === 0} + + {:else if value === 1} + + {:else if value === 2} + + {/if} + {/snippet} + + + +## Padding + +The only other commonly required styling element is padding. +Can xPadding and yPadding be added to example below? + + \ No newline at end of file diff --git a/docs/src/routes/docs/guides/styles/color-scale.svelte b/docs/src/routes/docs/guides/styles/color-scale.svelte new file mode 100644 index 000000000..5349a4269 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/color-scale.svelte @@ -0,0 +1,6 @@ + + +need a simple example for a color scale current examples too complex + 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/current-color.svelte b/docs/src/routes/docs/guides/styles/current-color.svelte new file mode 100644 index 000000000..4a2855007 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/current-color.svelte @@ -0,0 +1,16 @@ + + +
+ + + + + +
diff --git a/docs/src/routes/docs/guides/styles/inline-class.svelte b/docs/src/routes/docs/guides/styles/inline-class.svelte new file mode 100644 index 000000000..8219e79ae --- /dev/null +++ b/docs/src/routes/docs/guides/styles/inline-class.svelte @@ -0,0 +1,14 @@ + + + + + + + diff --git a/docs/src/routes/docs/guides/styles/inline-css-vars.svelte b/docs/src/routes/docs/guides/styles/inline-css-vars.svelte new file mode 100644 index 000000000..cc20f72a4 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/inline-css-vars.svelte @@ -0,0 +1,14 @@ + + + + + + + diff --git a/docs/src/routes/docs/guides/styles/inline-style.svelte b/docs/src/routes/docs/guides/styles/inline-style.svelte new file mode 100644 index 000000000..4dbfb8525 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/inline-style.svelte @@ -0,0 +1,15 @@ + + + + + + + diff --git a/docs/src/routes/docs/guides/styles/inline-svg.svelte b/docs/src/routes/docs/guides/styles/inline-svg.svelte new file mode 100644 index 000000000..f1cbccc0e --- /dev/null +++ b/docs/src/routes/docs/guides/styles/inline-svg.svelte @@ -0,0 +1,15 @@ + + + + + + + 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..6309b9005 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/padding.svelte @@ -0,0 +1,205 @@ + + +
+ +
+ Default Padding + Customize Default Padding + Symmetric Padding +
+ + + +
+ +
+ {#if paddingOption === 2} + + {: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: -(bottom + 5) + } + }, + yAxis: { + rule: true, + label: 'Bill Length (mm)', + labelProps: { + dx: left + 5 + } + } + }} + padding={{ ...defaultChartPadding(axis, legend), left, right, bottom, top }} + height={400} + /> +
diff --git a/docs/src/routes/docs/guides/styles/pie-c.svelte b/docs/src/routes/docs/guides/styles/pie-c.svelte new file mode 100644 index 000000000..d060e1948 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/pie-c.svelte @@ -0,0 +1,28 @@ + + + diff --git a/docs/src/routes/docs/guides/styles/pie-crange.svelte b/docs/src/routes/docs/guides/styles/pie-crange.svelte new file mode 100644 index 000000000..691d76f5f --- /dev/null +++ b/docs/src/routes/docs/guides/styles/pie-crange.svelte @@ -0,0 +1,19 @@ + + + diff --git a/docs/src/routes/docs/guides/styles/radial-gradient.svelte b/docs/src/routes/docs/guides/styles/radial-gradient.svelte new file mode 100644 index 000000000..8e0b454a0 --- /dev/null +++ b/docs/src/routes/docs/guides/styles/radial-gradient.svelte @@ -0,0 +1,15 @@ + + + + + + {#snippet children({ gradient })} + + {/snippet} + + +