@awesomeness-js/server 1.0.2 → 1.1.1

package/ui/components/colors/dynamic.css.js

@@ -0,0 +1,135 @@
+import { promises as fs } from 'fs';
+import {
+	dirname, join 
+} from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the current directory of this script file
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const dynamicColors = ()=>{
+
+	const colorNames = [
+		"red",
+		"orange",
+		"amber",
+		"yellow",
+		"lime",
+		"green",
+		"emerald",
+		"teal",
+		"cyan",
+		"sky",
+		"blue",
+		"indigo",
+		"violet",
+		"purple",
+		"fuchsia",
+		"pink",
+		"rose",
+		"slate",
+		"gray",
+		"zinc",
+		"neutral",
+		"stone"
+	  ];
+
+	const preFixes = {
+		'bg': 'background-color',
+		'border': 'border-color',
+		'text': 'color'
+	};
+
+	const shades = [
+		50,
+		100,
+		200,
+		300,
+		400,
+		500,
+		600,
+		700,
+		800,
+		900,
+		950
+	];
+
+	let css = "";
+
+	Object.keys(preFixes).forEach((preFix)=>{
+
+		// black and white
+		css += `.${preFix}-black{${preFixes[preFix]}:var(--black)}\n`;
+		css += `.${preFix}-white{${preFixes[preFix]}:var(--white)}\n`;
+
+		css += `.${preFix}-black--hover:hover{${preFixes[preFix]}:var(--black)}\n`;
+		css += `.${preFix}-white--hover:hover{${preFixes[preFix]}:var(--white)}\n`;
+
+		// border
+		const borderThicknesses = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
+
+		borderThicknesses.forEach((width) => {
+
+			css += `.border-${width}{border-style:solid; border-width: ${width}px;}\n`;
+
+			// top left, bottom, right
+			css += `.border-top-${width}{border-top-width:${width}px}\n`;
+			css += `.border-bottom-${width}{border-bottom-width:${width}px}\n`;
+			css += `.border-left-${width}{border-left-width:${width}px}\n`;
+			css += `.border-right-${width}{border-right-width:${width}px}\n`;
+			
+		});
+
+		// 1 - 100
+		const borderRadiusThicknesses = [];
+
+
+		for (let i = 1; i <= 100; i++) {
+
+			borderRadiusThicknesses.push(i);
+		
+		}
+
+		borderRadiusThicknesses.forEach((width) => {
+
+			css += `.border-radius-${width}{border-radius:${width}px}\n`;
+			
+		});
+
+
+		colorNames.forEach((colorName)=>{
+
+			shades.forEach((shade)=>{
+
+				css += `.${preFix}-${colorName}-${shade}{${preFixes[preFix]}:var(--${colorName}-${shade})}\n`;
+				css += `.${preFix}-${colorName}-${shade}--hover:hover{${preFixes[preFix]}:var(--${colorName}-${shade})}\n`;
+			
+			});
+		
+		});
+	
+	});
+
+
+	return {
+		css,
+		shades,
+		colorNames,
+		preFixes
+	};
+
+};
+
+async function cssBuild(){
+
+	const { css } = dynamicColors();
+	const filePath = join(__dirname, 'dynamic.css'); // Ensures it's written to the current working directory
+
+	await fs.writeFile(filePath, css, 'utf8');
+	
+	return true;
+
+}
+
+
+export { cssBuild };

package/ui/components/colors/dynamic.css.php

@@ -0,0 +1,79 @@
+<?php
+
+function dynamicColors() {
+	$colorNames = [
+		"amber",
+		"blue",
+		"cyan",
+		"emerald",
+		"fuchsia",
+		"gray",
+		"green",
+		"indigo",
+		"lime",
+		"neutral",
+		"orange",
+		"pink",
+		"purple",
+		"red",
+		"rose",
+		"sky",
+		"slate",
+		"stone",
+		"teal",
+		"violet",
+		"yellow",
+		"zinc",
+	];
+
+	$preFixes = [
+		'bg'     => 'background-color',
+		'border' => 'border-color',
+		'text'   => 'color'
+	];
+
+	$shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+	$css = "";
+
+	foreach ($preFixes as $preFix => $cssProp) {
+		// black and white
+		$css .= ".$preFix-black{{$cssProp}:var(--black)}\n";
+		$css .= ".$preFix-white{{$cssProp}:var(--white)}\n";
+
+		// border widths
+		$borderThicknesses = range(1, 8);
+		foreach ($borderThicknesses as $width) {
+			$css .= ".border-$width{border-width:{$width}px}\n";
+			$css .= ".border-top-$width{border-top-width:{$width}px}\n";
+			$css .= ".border-bottom-$width{border-bottom-width:{$width}px}\n";
+			$css .= ".border-left-$width{border-left-width:{$width}px}\n";
+			$css .= ".border-right-$width{border-right-width:{$width}px}\n";
+		}
+
+		// border radius 1-100
+		foreach (range(1, 100) as $radius) {
+			$css .= ".border-radius-$radius{border-radius:{$radius}px}\n";
+		}
+
+		// color + shade combos
+		foreach ($colorNames as $colorName) {
+			foreach ($shades as $shade) {
+				$css .= ".{$preFix}-{$colorName}-{$shade}{{$cssProp}:var(--{$colorName}-{$shade})}\n";
+				$css .= ".{$preFix}-{$colorName}-{$shade}--hover:hover{{$cssProp}:var(--{$colorName}-{$shade})}\n";
+			}
+		}
+	}
+
+	return $css;
+}
+
+function cssBuild() {
+	$css = dynamicColors();
+	$filePath = __DIR__ . '/dynamic.css';
+	file_put_contents($filePath, $css);
+	return true;
+}
+
+// Run the build when the script executes
+cssBuild();

package/ui/components/colors/example.js

@@ -0,0 +1,133 @@
+export default ({
+	exampleParam = 'test'
+} = {}) => {
+
+	let $container = $(`<div class="grid-1 gap-40 plr40"></div>`);
+		
+	const {
+		preFixes,
+		colors,
+		colorGroups,
+		shades
+	} = ui.colors();
+
+	const $shadePicker = $(`<div></div>`).appendTo($container);
+
+	$shadePicker.append('<h3 class="mb10"></h3>');
+
+	const $shadeSelected = $(`<h3>Pick a Shade</h3>`).appendTo($shadePicker);
+
+	const $shadeList = $(`<div class="grid-11 gap-10"></div>`).appendTo($shadePicker);
+
+	shades.forEach((shade) => {
+
+		const textShade = shade >= 400 ? 50 : 700;
+
+		const $shadeBox = $(`<div class="bg-gray-${shade} text-center p20 cursor-pointer text-gray-${textShade}">${shade}</div>`)
+			.appendTo($shadeList)
+			.click(() => {
+
+				chooseShade(shade);
+
+				$shadeSelected.html(`Pick a Shade - <strong>${shade}</strong>`);
+			
+			});
+
+	});
+
+
+	const $colors = $(`<div class="grid-1 gap-10"></div>`).appendTo($container);
+	const $colorDetails = $(`<div class=""></div>`).appendTo($container);
+
+	
+	function chooseShade(shade) {
+
+		$colors.empty();
+		$colorDetails.empty();
+
+		$.each(colorGroups, (groupName, groupColors) => {
+
+			let hoverShade = shade + 200;
+
+			if(hoverShade > 700){
+
+				hoverShade = 500;
+
+			}
+
+			if(hoverShade < 300){
+
+				hoverShade = 400;
+			
+			}
+			
+
+			const $colorGroup = $(`<div class="grid-${groupColors.length} gap-10"></div>`).appendTo($colors);
+
+			groupColors.forEach((colorName)=>{
+
+				const $bgBox = $(`<div class="bg-${colorName}-${shade} bg-${colorName}-${hoverShade}--hover text-white ptb40 text-center cursor-pointer">${colorName}</div>`)
+					.appendTo($colorGroup)
+					.click(()=>{
+
+						$colorDetails.empty();
+						
+						const $name = $(`<h3 class="mb10">${colorName}</h3>`).appendTo($colorDetails);
+
+						const $backgrounds = $(`<div class="grid-11-xl grid-6-d grid-2-p grid-4-t gap-10 mb10"></div>`).appendTo($colorDetails);
+						const $borders = $(`<div class="grid-11-xl grid-6-d grid-2-p grid-4-t gap-10 mb10"></div>`).appendTo($colorDetails);
+						const $texts = $(`<div class="grid-11-xl grid-6-d grid-2-p grid-4-t gap-10"></div>`).appendTo($colorDetails);
+
+						shades.forEach((shade) => {
+
+							const bgClass = `bg-${colorName}-${shade}`;
+							const borderClass = `border-${colorName}-${shade}`;
+							const textClass = `text-${colorName}-${shade}`;
+
+							const textColorForBg = shade >= 300 ? 'text-white' : `text-${colorName}-700`;
+
+							const $bgBox = $(`<div class="${bgClass} ${textColorForBg} p20 text-center">${bgClass}</div>`).appendTo($backgrounds);
+							const $borderBox = $(`<div class="${borderClass} border-4 p20 text-center">${borderClass}</div>`).appendTo($borders);
+							const $textBox = $(`<div class="${textClass} p20 text-center">${textClass}</div>`).appendTo($texts);
+
+						});
+
+					});
+
+
+							
+				const $name = $(`<h3 class="mb10">${colorName}</h3>`).appendTo($colorDetails);
+
+				const $backgrounds = $(`<div class="grid-11-xl grid-6-d grid-2-p grid-4-t gap-10 mb10"></div>`).appendTo($colorDetails);
+				const $borders = $(`<div class="grid-11-xl grid-6-d grid-2-p grid-4-t gap-10 mb10"></div>`).appendTo($colorDetails);
+				const $texts = $(`<div class="grid-11-xl grid-6-d grid-2-p grid-4-t gap-10"></div>`).appendTo($colorDetails);
+
+				shades.forEach((shade) => {
+
+					const bgClass = `bg-${colorName}-${shade}`;
+					const borderClass = `border-${colorName}-${shade}`;
+					const textClass = `text-${colorName}-${shade}`;
+
+					const textColorForBg = shade >= 300 ? 'text-white' : `text-${colorName}-700`;
+
+					const $bgBox = $(`<div class="${bgClass} ${textColorForBg} p20 text-center">${bgClass}</div>`).appendTo($backgrounds);
+					const $borderBox = $(`<div class="${borderClass} border-4 p20 text-center">${borderClass}</div>`).appendTo($borders);
+					const $textBox = $(`<div class="${textClass} p20 text-center">${textClass}</div>`).appendTo($texts);
+
+				});
+
+
+
+			});
+
+		});
+	
+	}
+
+
+	chooseShade(500);
+
+
+	return $container;
+
+};

package/ui/components/colors/index.js

@@ -0,0 +1,65 @@
+export default () => {
+
+	const colors = [
+		"red",
+		"orange",
+		"amber",
+		"yellow",
+		"lime",
+		"green",
+		"emerald",
+		"teal",
+		"cyan",
+		"sky",
+		"blue",
+		"indigo",
+		"violet",
+		"purple",
+		"fuchsia",
+		"pink",
+		"rose",
+		"slate",
+		"gray",
+		"zinc",
+		"neutral",
+		"stone"
+	  ];
+
+	const colorGroups = {
+		'reds': [ 'red', 'rose', 'pink' ],
+		'oranges': [ 'orange', 'amber', 'yellow' ],
+		'greens': [ 'lime', 'green', 'emerald', 'teal' ],
+		'blues': [ 'cyan', 'sky', 'blue' ],
+		'purples': [ 'indigo', 'violet', 'purple', 'fuchsia' ],
+		'grays': [ 'slate', 'gray', 'zinc', 'neutral', 'stone' ]
+	};
+
+	const preFixes = [
+		'bg',
+		'border',
+		'text'
+	];
+
+
+	const shades = [
+		50,
+		100,
+		200,
+		300,
+		400,
+		500,
+		600,
+		700,
+		800,
+		900,
+		950
+	];
+
+	return {
+		colorGroups,
+		preFixes,
+		colors,
+		shades
+	};
+
+};

package/ui/components/colors/map.js

@@ -0,0 +1,13 @@
+export default (word, customMap = {}) => {
+
+	if(customMap && customMap[word]) {
+	
+		return customMap[word];
+
+	}
+
+	const randomColor = ui.colors.random();
+
+	return randomColor;
+
+};

package/ui/components/colors/random.js

@@ -0,0 +1,17 @@
+export default ({
+	shadeMin = 400,
+	shadeMax = 700
+} = {}) => {
+
+	const {
+		colors,
+		shades
+	} = ui.colors();
+
+	const randomColor = colors[Math.floor(Math.random() * colors.length)];
+	const shadeRange = shades.filter((shade) => shade >= shadeMin && shade <= shadeMax);
+	const randomShade = shadeRange[Math.floor(Math.random() * shadeRange.length)];
+
+	return `${randomColor}-${randomShade}`;
+
+};

package/ui/components/colors/tailwind-colors.css

@@ -0,0 +1,247 @@
+:root {
+	--red-50: oklch(0.971 0.013 17.38);
+	--red-100: oklch(0.936 0.032 17.717);
+	--red-200: oklch(0.885 0.062 18.334);
+	--red-300: oklch(0.808 0.114 19.571);
+	--red-400: oklch(0.704 0.191 22.216);
+	--red-500: oklch(0.637 0.237 25.331);
+	--red-600: oklch(0.577 0.245 27.325);
+	--red-700: oklch(0.505 0.213 27.518);
+	--red-800: oklch(0.444 0.177 26.899);
+	--red-900: oklch(0.396 0.141 25.723);
+	--red-950: oklch(0.258 0.092 26.042);
+	--orange-50: oklch(0.98 0.016 73.684);
+	--orange-100: oklch(0.954 0.038 75.164);
+	--orange-200: oklch(0.901 0.076 70.697);
+	--orange-300: oklch(0.837 0.128 66.29);
+	--orange-400: oklch(0.75 0.183 55.934);
+	--orange-500: oklch(0.705 0.213 47.604);
+	--orange-600: oklch(0.646 0.222 41.116);
+	--orange-700: oklch(0.553 0.195 38.402);
+	--orange-800: oklch(0.47 0.157 37.304);
+	--orange-900: oklch(0.408 0.123 38.172);
+	--orange-950: oklch(0.266 0.079 36.259);
+	--amber-50: oklch(0.987 0.022 95.277);
+	--amber-100: oklch(0.962 0.059 95.617);
+	--amber-200: oklch(0.924 0.12 95.746);
+	--amber-300: oklch(0.879 0.169 91.605);
+	--amber-400: oklch(0.828 0.189 84.429);
+	--amber-500: oklch(0.769 0.188 70.08);
+	--amber-600: oklch(0.666 0.179 58.318);
+	--amber-700: oklch(0.555 0.163 48.998);
+	--amber-800: oklch(0.473 0.137 46.201);
+	--amber-900: oklch(0.414 0.112 45.904);
+	--amber-950: oklch(0.279 0.077 45.635);
+	--yellow-50: oklch(0.987 0.026 102.212);
+	--yellow-100: oklch(0.973 0.071 103.193);
+	--yellow-200: oklch(0.945 0.129 101.54);
+	--yellow-300: oklch(0.905 0.182 98.111);
+	--yellow-400: oklch(0.852 0.199 91.936);
+	--yellow-500: oklch(0.795 0.184 86.047);
+	--yellow-600: oklch(0.681 0.162 75.834);
+	--yellow-700: oklch(0.554 0.135 66.442);
+	--yellow-800: oklch(0.476 0.114 61.907);
+	--yellow-900: oklch(0.421 0.095 57.708);
+	--yellow-950: oklch(0.286 0.066 53.813);
+	--lime-50: oklch(0.986 0.031 120.757);
+	--lime-100: oklch(0.967 0.067 122.328);
+	--lime-200: oklch(0.938 0.127 124.321);
+	--lime-300: oklch(0.897 0.196 126.665);
+	--lime-400: oklch(0.841 0.238 128.85);
+	--lime-500: oklch(0.768 0.233 130.85);
+	--lime-600: oklch(0.648 0.2 131.684);
+	--lime-700: oklch(0.532 0.157 131.589);
+	--lime-800: oklch(0.453 0.124 130.933);
+	--lime-900: oklch(0.405 0.101 131.063);
+	--lime-950: oklch(0.274 0.072 132.109);
+	--green-50: oklch(0.982 0.018 155.826);
+	--green-100: oklch(0.962 0.044 156.743);
+	--green-200: oklch(0.925 0.084 155.995);
+	--green-300: oklch(0.871 0.15 154.449);
+	--green-400: oklch(0.792 0.209 151.711);
+	--green-500: oklch(0.723 0.219 149.579);
+	--green-600: oklch(0.627 0.194 149.214);
+	--green-700: oklch(0.527 0.154 150.069);
+	--green-800: oklch(0.448 0.119 151.328);
+	--green-900: oklch(0.393 0.095 152.535);
+	--green-950: oklch(0.266 0.065 152.934);
+	--emerald-50: oklch(0.979 0.021 166.113);
+	--emerald-100: oklch(0.95 0.052 163.051);
+	--emerald-200: oklch(0.905 0.093 164.15);
+	--emerald-300: oklch(0.845 0.143 164.978);
+	--emerald-400: oklch(0.765 0.177 163.223);
+	--emerald-500: oklch(0.696 0.17 162.48);
+	--emerald-600: oklch(0.596 0.145 163.225);
+	--emerald-700: oklch(0.508 0.118 165.612);
+	--emerald-800: oklch(0.432 0.095 166.913);
+	--emerald-900: oklch(0.378 0.077 168.94);
+	--emerald-950: oklch(0.262 0.051 172.552);
+	--teal-50: oklch(0.984 0.014 180.72);
+	--teal-100: oklch(0.953 0.051 180.801);
+	--teal-200: oklch(0.91 0.096 180.426);
+	--teal-300: oklch(0.855 0.138 181.071);
+	--teal-400: oklch(0.777 0.152 181.912);
+	--teal-500: oklch(0.704 0.14 182.503);
+	--teal-600: oklch(0.6 0.118 184.704);
+	--teal-700: oklch(0.511 0.096 186.391);
+	--teal-800: oklch(0.437 0.078 188.216);
+	--teal-900: oklch(0.386 0.063 188.416);
+	--teal-950: oklch(0.277 0.046 192.524);
+	--cyan-50: oklch(0.984 0.019 200.873);
+	--cyan-100: oklch(0.956 0.045 203.388);
+	--cyan-200: oklch(0.917 0.08 205.041);
+	--cyan-300: oklch(0.865 0.127 207.078);
+	--cyan-400: oklch(0.789 0.154 211.53);
+	--cyan-500: oklch(0.715 0.143 215.221);
+	--cyan-600: oklch(0.609 0.126 221.723);
+	--cyan-700: oklch(0.52 0.105 223.128);
+	--cyan-800: oklch(0.45 0.085 224.283);
+	--cyan-900: oklch(0.398 0.07 227.392);
+	--cyan-950: oklch(0.302 0.056 229.695);
+	--sky-50: oklch(0.977 0.013 236.62);
+	--sky-100: oklch(0.951 0.026 236.824);
+	--sky-200: oklch(0.901 0.058 230.902);
+	--sky-300: oklch(0.828 0.111 230.318);
+	--sky-400: oklch(0.746 0.16 232.661);
+	--sky-500: oklch(0.685 0.169 237.323);
+	--sky-600: oklch(0.588 0.158 241.966);
+	--sky-700: oklch(0.5 0.134 242.749);
+	--sky-800: oklch(0.443 0.11 240.79);
+	--sky-900: oklch(0.391 0.09 240.876);
+	--sky-950: oklch(0.293 0.066 243.157);
+	--blue-50: oklch(0.97 0.014 254.604);
+	--blue-100: oklch(0.932 0.032 255.585);
+	--blue-200: oklch(0.882 0.059 254.128);
+	--blue-300: oklch(0.809 0.105 251.813);
+	--blue-400: oklch(0.707 0.165 254.624);
+	--blue-500: oklch(0.623 0.214 259.815);
+	--blue-600: oklch(0.546 0.245 262.881);
+	--blue-700: oklch(0.488 0.243 264.376);
+	--blue-800: oklch(0.424 0.199 265.638);
+	--blue-900: oklch(0.379 0.146 265.522);
+	--blue-950: oklch(0.282 0.091 267.935);
+	--indigo-50: oklch(0.962 0.018 272.314);
+	--indigo-100: oklch(0.93 0.034 272.788);
+	--indigo-200: oklch(0.87 0.065 274.039);
+	--indigo-300: oklch(0.785 0.115 274.713);
+	--indigo-400: oklch(0.673 0.182 276.935);
+	--indigo-500: oklch(0.585 0.233 277.117);
+	--indigo-600: oklch(0.511 0.262 276.966);
+	--indigo-700: oklch(0.457 0.24 277.023);
+	--indigo-800: oklch(0.398 0.195 277.366);
+	--indigo-900: oklch(0.359 0.144 278.697);
+	--indigo-950: oklch(0.257 0.09 281.288);
+	--violet-50: oklch(0.969 0.016 293.756);
+	--violet-100: oklch(0.943 0.029 294.588);
+	--violet-200: oklch(0.894 0.057 293.283);
+	--violet-300: oklch(0.811 0.111 293.571);
+	--violet-400: oklch(0.702 0.183 293.541);
+	--violet-500: oklch(0.606 0.25 292.717);
+	--violet-600: oklch(0.541 0.281 293.009);
+	--violet-700: oklch(0.491 0.27 292.581);
+	--violet-800: oklch(0.432 0.232 292.759);
+	--violet-900: oklch(0.38 0.189 293.745);
+	--violet-950: oklch(0.283 0.141 291.089);
+	--purple-50: oklch(0.977 0.014 308.299);
+	--purple-100: oklch(0.946 0.033 307.174);
+	--purple-200: oklch(0.902 0.063 306.703);
+	--purple-300: oklch(0.827 0.119 306.383);
+	--purple-400: oklch(0.714 0.203 305.504);
+	--purple-500: oklch(0.627 0.265 303.9);
+	--purple-600: oklch(0.558 0.288 302.321);
+	--purple-700: oklch(0.496 0.265 301.924);
+	--purple-800: oklch(0.438 0.218 303.724);
+	--purple-900: oklch(0.381 0.176 304.987);
+	--purple-950: oklch(0.291 0.149 302.717);
+	--fuchsia-50: oklch(0.977 0.017 320.058);
+	--fuchsia-100: oklch(0.952 0.037 318.852);
+	--fuchsia-200: oklch(0.903 0.076 319.62);
+	--fuchsia-300: oklch(0.833 0.145 321.434);
+	--fuchsia-400: oklch(0.74 0.238 322.16);
+	--fuchsia-500: oklch(0.667 0.295 322.15);
+	--fuchsia-600: oklch(0.591 0.293 322.896);
+	--fuchsia-700: oklch(0.518 0.253 323.949);
+	--fuchsia-800: oklch(0.452 0.211 324.591);
+	--fuchsia-900: oklch(0.401 0.17 325.612);
+	--fuchsia-950: oklch(0.293 0.136 325.661);
+	--pink-50: oklch(0.971 0.014 343.198);
+	--pink-100: oklch(0.948 0.028 342.258);
+	--pink-200: oklch(0.899 0.061 343.231);
+	--pink-300: oklch(0.823 0.12 346.018);
+	--pink-400: oklch(0.718 0.202 349.761);
+	--pink-500: oklch(0.656 0.241 354.308);
+	--pink-600: oklch(0.592 0.249 0.584);
+	--pink-700: oklch(0.525 0.223 3.958);
+	--pink-800: oklch(0.459 0.187 3.815);
+	--pink-900: oklch(0.408 0.153 2.432);
+	--pink-950: oklch(0.284 0.109 3.907);
+	--rose-50: oklch(0.969 0.015 12.422);
+	--rose-100: oklch(0.941 0.03 12.58);
+	--rose-200: oklch(0.892 0.058 10.001);
+	--rose-300: oklch(0.81 0.117 11.638);
+	--rose-400: oklch(0.712 0.194 13.428);
+	--rose-500: oklch(0.645 0.246 16.439);
+	--rose-600: oklch(0.586 0.253 17.585);
+	--rose-700: oklch(0.514 0.222 16.935);
+	--rose-800: oklch(0.455 0.188 13.697);
+	--rose-900: oklch(0.41 0.159 10.272);
+	--rose-950: oklch(0.271 0.105 12.094);
+	--slate-50: oklch(0.984 0.003 247.858);
+	--slate-100: oklch(0.968 0.007 247.896);
+	--slate-200: oklch(0.929 0.013 255.508);
+	--slate-300: oklch(0.869 0.022 252.894);
+	--slate-400: oklch(0.704 0.04 256.788);
+	--slate-500: oklch(0.554 0.046 257.417);
+	--slate-600: oklch(0.446 0.043 257.281);
+	--slate-700: oklch(0.372 0.044 257.287);
+	--slate-800: oklch(0.279 0.041 260.031);
+	--slate-900: oklch(0.208 0.042 265.755);
+	--slate-950: oklch(0.129 0.042 264.695);
+	--gray-50: oklch(0.985 0.002 247.839);
+	--gray-100: oklch(0.967 0.003 264.542);
+	--gray-200: oklch(0.928 0.006 264.531);
+	--gray-300: oklch(0.872 0.01 258.338);
+	--gray-400: oklch(0.707 0.022 261.325);
+	--gray-500: oklch(0.551 0.027 264.364);
+	--gray-600: oklch(0.446 0.03 256.802);
+	--gray-700: oklch(0.373 0.034 259.733);
+	--gray-800: oklch(0.278 0.033 256.848);
+	--gray-900: oklch(0.21 0.034 264.665);
+	--gray-950: oklch(0.13 0.028 261.692);
+	--zinc-50: oklch(0.985 0 0);
+	--zinc-100: oklch(0.967 0.001 286.375);
+	--zinc-200: oklch(0.92 0.004 286.32);
+	--zinc-300: oklch(0.871 0.006 286.286);
+	--zinc-400: oklch(0.705 0.015 286.067);
+	--zinc-500: oklch(0.552 0.016 285.938);
+	--zinc-600: oklch(0.442 0.017 285.786);
+	--zinc-700: oklch(0.37 0.013 285.805);
+	--zinc-800: oklch(0.274 0.006 286.033);
+	--zinc-900: oklch(0.21 0.006 285.885);
+	--zinc-950: oklch(0.141 0.005 285.823);
+	--neutral-50: oklch(0.985 0 0);
+	--neutral-100: oklch(0.97 0 0);
+	--neutral-200: oklch(0.922 0 0);
+	--neutral-300: oklch(0.87 0 0);
+	--neutral-350: oklch(0.8 0 0);
+	--neutral-400: oklch(0.708 0 0);
+	--neutral-500: oklch(0.556 0 0);
+	--neutral-600: oklch(0.439 0 0);
+	--neutral-700: oklch(0.371 0 0);
+	--neutral-800: oklch(0.269 0 0);
+	--neutral-900: oklch(0.205 0 0);
+	--neutral-950: oklch(0.145 0 0);
+	--stone-50: oklch(0.985 0.001 106.423);
+	--stone-100: oklch(0.97 0.001 106.424);
+	--stone-200: oklch(0.923 0.003 48.717);
+	--stone-300: oklch(0.869 0.005 56.366);
+	--stone-400: oklch(0.709 0.01 56.259);
+	--stone-500: oklch(0.553 0.013 58.071);
+	--stone-600: oklch(0.444 0.011 73.639);
+	--stone-700: oklch(0.374 0.01 67.558);
+	--stone-800: oklch(0.268 0.007 34.298);
+	--stone-900: oklch(0.216 0.006 56.043);
+	--stone-950: oklch(0.147 0.004 49.25);
+	--black: #000;
+	--white: #fff;
+}