Enhanced exports

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;
@@ -361,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;
 }
 

src/lib/components/combinations/Combinations.svelte

@@ -64,9 +64,6 @@
 
 <style>
 	.data-options {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr));
-		gap: 1rem;
 		animation: slide-up 250ms ease-out;
 		contain: layout;
 	}

src/lib/components/export/CodeArea.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let code: string;
+</script>
+
+<textarea class="elevated" rows="10" readonly>{code}</textarea>
+
+<style>
+	textarea {
+		align-self: stretch;
+		border: 0;
+		border-radius: var(--radius);
+		padding: 1rem;
+		background: var(--bg-hard);
+		font: inherit;
+		font-family: var(--font-mono);
+		resize: none;
+		white-space: pre;
+	}
+</style>

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);
 </script>
 
-<pre class="elevated">{JSON.stringify(json, null, 2)}</pre>
+<CodeArea {code} />

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,18 +182,30 @@
 							</div>
 						</div>
 					</fieldset>
+
+					<div>
+						<label for="prefix">Variables prefix</label>
+						<input
+							id="prefix"
+							name="prefix"
+							type="text"
+							bind:value={$exportPrefix}
+						/>
+					</div>
 				{/if}
 
 				{#if $exportFormat !== 'tokens' && $exportColorFormat !== 'hex' && $exportColorFormat !== 'rgb'}
-					<label for="precision">Precision</label>
-					<input
-						id="precision"
-						name="precision"
-						type="number"
-						min={0}
-						max={5}
-						bind:value={$exportPrecision}
-					/>
+					<div>
+						<label for="precision">Precision</label>
+						<input
+							id="precision"
+							name="precision"
+							type="number"
+							min={0}
+							max={5}
+							bind:value={$exportPrecision}
+						/>
+					</div>
 				{/if}
 			</div>
 		</div>
@@ -206,6 +219,7 @@
 				{entries}
 				format={$exportFormat}
 				casing={$exportCasing}
+				prefix={$exportPrefix}
 			/>
 		{/if}
 	</div>

src/lib/components/export/VariablesExport.svelte

@@ -8,20 +8,25 @@
 	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;
 	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');
+
+	$: code = `/* @see ${permalink($rootNode)} */\n${variables}`;
 </script>
 
-<pre class="elevated">/* @see {permalink($rootNode)} */
-{variables}
-</pre>
+<CodeArea {code} />

src/lib/stores/export.ts

@@ -12,3 +12,4 @@ export const exportFormat = writable<ExportFormat>('table');
 export const exportColorFormat = writable<ColorFormat>('hex');
 export const exportCasing = writable<ExportCasing>('dash');
 export const exportPrecision = writable(3);
+export const exportPrefix = writable('');

src/lib/utils/strings.ts

@@ -1,16 +1,23 @@
+// 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();
 
 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)
 		)