+ change background text & color

Author: victorpreston

src/app/globals.css

@@ -34,7 +34,7 @@ body {
 }
 
 .default-line-color {
-  background: theme("colors.system.purple50");
+  background: theme("colors.system.slate50");
 }
 
 .change-line-color {

src/app/page.tsx

@@ -79,7 +79,7 @@ export default function Home() {
             </div>
 
             <div className="hidden sm:flex absolute top-[120%] left-0 w-full">
-              <div className="flex w-full text-gray-400 p-4 rounded border border-system-purple20 bg-system-purple80 bg-opacity-10 gap-6">
+              <div className="flex w-full text-gray-400 p-4 rounded border border-system-slate20 bg-system-slate80 bg-opacity-10 gap-6">
                 <div className="flex flex-col items-start justify-start w-3/4">
                   <h3 className="text-lg">
                     {sortingAlgorithmsData[selectedAlgorithm].title}

src/components/Input/Select.tsx

@@ -18,7 +18,7 @@ export const Select = ({
         disabled={isDisabled}
         onChange={onChange}
         defaultValue={defaultValue}
-        className="block appearance-none h-8 w-full bg-system-purple10 border-system-purple20 border px-4 py-1 pr-8 rounded-lg shadow leading-tight focus:outline-none focus:shadow-outline text-gray-300"
+        className="block appearance-none h-8 w-full bg-system-slate10 border-system-slate20 border px-4 py-1 pr-8 rounded-lg shadow leading-tight focus:outline-none focus:shadow-outline text-gray-300"
       >
         {options.map((option) => (
           <option key={option.value} value={option.value}>

tailwind.config.ts

@@ -15,18 +15,18 @@ const config: Config = {
       },
       colors: {
         system: {
-          purple10: "#240643",
-          purple15: "#300b60",
-          purple20: "#401075",
-          purple30: "#5a1ba9",
-          purple40: "#7526e3",
-          purple50: "#9050e9",
-          purple60: "#ad7bee",
-          purple65: "#b78def",
-          purple70: "#c29ef1",
-          purple80: "#d7bff2",
-          purple90: "#ece1f9",
-          purple95: "#f6f2fb",
+          slate10: "#240643",
+          slate15: "#300b60",
+          slate20: "#401075",
+          slate30: "#5a1ba9",
+          slate40: "#7526e3",
+          slate50: "#9050e9",
+          slate60: "#ad7bee",
+          slate65: "#b78def",
+          slate70: "#c29ef1",
+          slate80: "#d7bff2",
+          slate90: "#ece1f9",
+          slate95: "#f6f2fb",
 
           green10: "#071b12",
           green15: "#0c2912",