Update Themer and Conic to use local TW default colors

skeletonlabs · Oct 11, 2022 · 8d1f27f · 8d1f27f
1 parent 8ebdd6e
commit 8d1f27f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 16 deletions.
diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
@@ -14,7 +14,7 @@
 
 	// Helpers
 	import { getTailwindColor, randomTailwindColor, genHexPalette, generateThemeCss } from './helpers';
-	import { colorsTailwind } from './colors';
+	import { tailwindDefaultColors } from '$lib/tailwind/colors';
 
 	// Local
 	const regexValidHexCode = new RegExp(/^#[0-9a-f]{6}$/i);
@@ -167,7 +167,7 @@
 						<span class="text-white capitalize">{colorKey}</span>
 						{#if $storeMode}
 							<select class="capitalize" bind:value={$storeTailwindForm[colorKey]} on:change={()=>{onTailwindSelect()}}>
-								{#each colorsTailwind as c}<option value={c.label}>{c.label}</option>{/each}
+								{#each tailwindDefaultColors as c}<option value={c.label}>{c.label}</option>{/each}
 							</select>
 						{:else}
 							<input

diff --git a/src/docs/DocsThemer/helpers.ts b/src/docs/DocsThemer/helpers.ts
@@ -2,16 +2,16 @@
 
 // @ts-ignore
 import paletteGenerator from '@bobthered/tailwindcss-palette-generator';
-import { colorsTailwind } from './colors';
+import { tailwindDefaultColors } from '../../lib/tailwind/colors';
 
 // Talwind: Get a Particular Color
 export function getTailwindColor(colorName: string): any {
-	return colorsTailwind.find((c) => c.label === colorName);
+	return tailwindDefaultColors.find((c) => c.label === colorName);
 }
 
 // Tailwind: Pick Random Color
 export function randomTailwindColor(): any {
-	return colorsTailwind[(Math.random() * colorsTailwind.length) | 0];
+	return tailwindDefaultColors[(Math.random() * tailwindDefaultColors.length) | 0];
 }
 
 // Hex: Source: https://github.com/bobthered/tailwindcss-palette-generator

diff --git a/src/lib/components/ConicGradient/ConicGradient.svelte b/src/lib/components/ConicGradient/ConicGradient.svelte
@@ -1,12 +1,5 @@
-<!-- 
- https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
- https://www.sitepoint.com/create-css-conic-gradients-pie-charts/
- https://css-tricks.com/radial-gradient-recipes/ 
- https://tailwindcss.com/docs/configuration#referencing-in-java-script
- -->
 <script lang="ts">
-	import tailwindColors from 'tailwindcss/colors';
-
+	import { tailwindDefaultColors } from '$lib/tailwind/colors';
 	import type { ConicStop } from './types';
 
 	// Props
@@ -32,8 +25,8 @@
 		// If string, keep as is
 		if (typeof color === 'string') return color;
 		// If object, provide default Tailwind color
-		const tw: any = tailwindColors;
-		return tw[color[0]][color[1]];
+		const colorSet = tailwindDefaultColors.find((c) => c.label === color[0]);
+		return colorSet.shades[color[1]].hex;
 	}
 
 	// Generate Conic Gradient style

diff --git a/src/docs/DocsThemer/colors.ts → src/lib/tailwind/colors.ts b/src/docs/DocsThemer/colors.ts → src/lib/tailwind/colors.ts
@@ -1,6 +1,6 @@
 // https://tailwindcss.com/docs/customizing-colors#default-color-palette
 
-export const colorsTailwind: any[] = [
+export const tailwindDefaultColors: any[] = [
 	{
 		label: 'slate',
 		shades: {