From 58a635dc9c7fa068b89e6fa0c5c2c661c10efb4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Girault?= Date: Sat, 20 Apr 2024 18:58:50 +0200 Subject: [PATCH 1/4] Made exports easier to select Using a `textarea` instead of a `pre` allows "select all" to select just the contents and not the whole page. Fixes #48 --- src/global.css | 9 --------- src/lib/components/export/CodeArea.svelte | 19 +++++++++++++++++++ .../export/DesignTokensExport.svelte | 5 ++++- .../components/export/VariablesExport.svelte | 7 ++++--- 4 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 src/lib/components/export/CodeArea.svelte diff --git a/src/global.css b/src/global.css index b92e554..58894a1 100644 --- a/src/global.css +++ b/src/global.css @@ -100,15 +100,6 @@ tbody tr:last-child td { padding-right: 0; } -pre { - border-radius: var(--radius); - padding: 1rem; - background: var(--bg-hard); - font: inherit; - font-family: var(--font-mono); - overflow-x: auto; -} - .h2 { margin-bottom: var(--vgap); text-transform: lowercase; diff --git a/src/lib/components/export/CodeArea.svelte b/src/lib/components/export/CodeArea.svelte new file mode 100644 index 0000000..d69a5a9 --- /dev/null +++ b/src/lib/components/export/CodeArea.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/lib/components/export/DesignTokensExport.svelte b/src/lib/components/export/DesignTokensExport.svelte index 8bb0cc1..079840c 100644 --- a/src/lib/components/export/DesignTokensExport.svelte +++ b/src/lib/components/export/DesignTokensExport.svelte @@ -3,6 +3,7 @@ import {permalink} from '$lib/routing'; import type {Entry} from '$lib/stores/combinations'; import {rootNode} from '$lib/stores/palette'; + import CodeArea from './CodeArea.svelte'; export let entries: Entry[]; @@ -24,6 +25,8 @@ ...tokens } }; + + $: code = JSON.stringify(json, null, 2); -
{JSON.stringify(json, null, 2)}
+ diff --git a/src/lib/components/export/VariablesExport.svelte b/src/lib/components/export/VariablesExport.svelte index d41f524..ac1117e 100644 --- a/src/lib/components/export/VariablesExport.svelte +++ b/src/lib/components/export/VariablesExport.svelte @@ -8,6 +8,7 @@ import {rootNode} from '$lib/stores/palette'; import {cssRule, sassRule} from '$lib/utils/css'; import {camelCase, dashCase} from '$lib/utils/strings'; + import CodeArea from './CodeArea.svelte'; export let entries: ExportEntry[]; export let format: ExportFormat; @@ -20,8 +21,8 @@ formatRule(formatCase(name), cssColor) ) .join('\n'); + + $: code = `/* @see ${permalink($rootNode)} */\n${variables}`; -
/* @see {permalink($rootNode)} */
-{variables}
-
+ From 77d5a1a2cc777d2e1341bb0a1ee15d3258e2e77f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Girault?= Date: Sat, 20 Apr 2024 19:01:50 +0200 Subject: [PATCH 2/4] Added a way to prefix exported variables This makes it easier to paste variables in an environment with certain conventions without having to name each variable accordingly in the tree. --- src/lib/components/export/Export.svelte | 12 +++++++++++- src/lib/components/export/VariablesExport.svelte | 6 +++++- src/lib/stores/export.ts | 1 + 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/lib/components/export/Export.svelte b/src/lib/components/export/Export.svelte index a101686..a25e79e 100644 --- a/src/lib/components/export/Export.svelte +++ b/src/lib/components/export/Export.svelte @@ -10,7 +10,8 @@ exportCasing, exportColorFormat, exportFormat, - exportPrecision + exportPrecision, + exportPrefix } from '$lib/stores/export'; import DesignTokensExport from './DesignTokensExport.svelte'; @@ -181,6 +182,14 @@ + + + {/if} {#if $exportFormat !== 'tokens' && $exportColorFormat !== 'hex' && $exportColorFormat !== 'rgb'} @@ -206,6 +215,7 @@ {entries} format={$exportFormat} casing={$exportCasing} + prefix={$exportPrefix} /> {/if} diff --git a/src/lib/components/export/VariablesExport.svelte b/src/lib/components/export/VariablesExport.svelte index ac1117e..b43c0d7 100644 --- a/src/lib/components/export/VariablesExport.svelte +++ b/src/lib/components/export/VariablesExport.svelte @@ -13,12 +13,16 @@ export let entries: ExportEntry[]; export let format: ExportFormat; export let casing: ExportCasing; + export let prefix: string; $: formatRule = format === 'css' ? cssRule : sassRule; $: formatCase = casing === 'dash' ? dashCase : camelCase; $: variables = entries .map(({name, cssColor}) => - formatRule(formatCase(name), cssColor) + formatRule( + formatCase(prefix ? `${prefix} ${name}` : name), + cssColor + ) ) .join('\n'); diff --git a/src/lib/stores/export.ts b/src/lib/stores/export.ts index 1241235..0f496ba 100644 --- a/src/lib/stores/export.ts +++ b/src/lib/stores/export.ts @@ -12,3 +12,4 @@ export const exportFormat = writable('table'); export const exportColorFormat = writable('hex'); export const exportCasing = writable('dash'); export const exportPrecision = writable(3); +export const exportPrefix = writable(''); From 4e0f3b5bfe07fcfc69d8aa899d12eba1b7e829a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Girault?= Date: Sat, 20 Apr 2024 19:16:42 +0200 Subject: [PATCH 3/4] Preventing illegal chars in CSS and Sass variables --- src/lib/utils/strings.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/lib/utils/strings.ts b/src/lib/utils/strings.ts index 4833a89..42f6ef6 100644 --- a/src/lib/utils/strings.ts +++ b/src/lib/utils/strings.ts @@ -1,3 +1,8 @@ +// Sass is more liberal than CSS in what chars are legal in +// a variable name, but we're taking the stricter approach. +const stripForbiddenChars = (text: string) => + text.replaceAll(/[^a-zA-Z0-9_-]/g, ''); + export const sentenceCase = (sentence: string) => sentence.charAt(0).toUpperCase() + sentence.slice(1).toLowerCase(); @@ -5,12 +10,14 @@ export const sentenceCase = (sentence: string) => export const dashCase = (sentence: string) => sentence .split(' ') + .map(stripForbiddenChars) .map((word) => word.toLowerCase()) .join('-'); export const camelCase = (sentence: string) => sentence .split(' ') + .map(stripForbiddenChars) .map((word, index) => index === 0 ? word.toLowerCase() : sentenceCase(word) ) From 34cbeaf6cb68d86e60e8885a07dfe65ef630834f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Girault?= Date: Sat, 20 Apr 2024 19:35:19 +0200 Subject: [PATCH 4/4] Improved display of export options Using the same layout as the global options. --- src/global.css | 3 ++ .../combinations/Combinations.svelte | 3 -- src/lib/components/export/Export.svelte | 36 ++++++++++--------- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/global.css b/src/global.css index 58894a1..393c015 100644 --- a/src/global.css +++ b/src/global.css @@ -352,6 +352,9 @@ input[type='range'] { .data-options { position: sticky; top: 1rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr)); + gap: 1rem; min-width: 20ch; } diff --git a/src/lib/components/combinations/Combinations.svelte b/src/lib/components/combinations/Combinations.svelte index c2460ce..d5dc896 100644 --- a/src/lib/components/combinations/Combinations.svelte +++ b/src/lib/components/combinations/Combinations.svelte @@ -64,9 +64,6 @@