Update ui and added more sacred geometry patterns

RodrigoLuglio · Oct 10, 2024 · 10a46cb · 10a46cb
1 parent 1881af8
commit 10a46cb
Show file tree

Hide file tree

Showing 21 changed files with 1,217 additions and 1,159 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "react-colorful": "^5.6.1",
     "react-dom": "19.0.0-rc-f994737d14-20240522",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/color": "^3.0.6",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React, { ErrorInfo } from 'react'
-import { ThemeProvider } from '@/contexts/ThemeContext'
 
 import ActiveColorPicker from '@/components/ActiveColorPicker'
 import ExportButton from '@/components/ExportButton'
@@ -11,8 +10,7 @@ import ThemeControls from '@/components/ThemeControls'
 import SyntaxColorList from '@/components/SyntaxColorList'
 import ColorList from '@/components/ColorList'
 import AnsiColorList from '@/components/AnsiColorList'
-
-import { useTheme } from '@/contexts/ThemeContext'
+import { ThemeProvider } from '@/contexts/ThemeContext'
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -41,33 +39,31 @@ class ErrorBoundary extends React.Component<
 }
 
 const ThemeGenerator = () => {
-  const { colors } = useTheme()
   return (
-    <section style={{ backgroundColor: colors.BG1 }}>
-      <div className="container mx-auto p-4 flex flex-col gap-5">
-        <h1 className="text-2xl font-bold mb-4">VS Code Theme Generator</h1>
-        <div className="flex flex-wrap lg:flex-nowrap gap-10">
-          <div className="w-full lg:w-10/12">
-            <ThemePreview />
-          </div>
-          <div className="flex flex-col items-center justify-between w-full lg:w-2/12">
-            <ThemeControls />
-            <div className="">
-              <ActiveColorPicker />
+    <section>
+      <div className="mx-auto p-4 flex flex-col gap-5">
+        <div className="flex flex-wrap lg:flex-nowrap gap-8">
+          <div className="flex flex-col items-center justify-between flex-shrink">
+            <div className="flex flex-col items-center flex-1 gap-5">
+              <ThemeControls />
+              <div className="">
+                <ActiveColorPicker />
+              </div>
             </div>
           </div>
-        </div>
-        <div className="flex gap-10 w-full">
-          <div className="lg:w-9/12">
-            <SyntaxColorList title="Syntax Colors" isThemeColors={false} />
+          <div className="flex-1">
+            <ThemePreview />
           </div>
-          <div className="lg:w-3/12">
+          <div className="flex flex-col gap-5">
             <ColorList title="Theme Colors" isThemeColors={true} />
+            <AnsiColorList />
           </div>
         </div>
+        <div className="w-full">
+          <SyntaxColorList title="Syntax Colors" isThemeColors={false} />
+        </div>
 
-        <AnsiColorList />
-        <div className="mt-4 flex justify-end gap-4">
+        <div className="flex justify-end gap-4">
           <ExportButton />
           <ExportSemanticButton />
         </div>

diff --git a/src/components/AnsiColorList.tsx b/src/components/AnsiColorList.tsx
@@ -66,22 +66,26 @@ const AnsiColorList: React.FC = () => {
   )
 
   return (
-    <div className="mb-4">
+    <div
+      style={{ backgroundColor: colors.BG1 }}
+      className="p-4 border-border border rounded-lg shadow-md"
+    >
       <h2 className="text-xl font-semibold mb-2">ANSI Colors</h2>
-      <div
-        className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2 p-4"
-        style={{ backgroundColor: colors.BG1 }}
-      >
+      <div className="grid grid-cols-1 gap-4">
         {colorPairs.map(([color, brightColor]) => (
-          <div key={color} className="flex flex-col gap-2">
-            <ColorBox
-              colorKey={color}
-              colorValue={ansiColors[color as keyof typeof ansiColors]}
-            />
-            <ColorBox
-              colorKey={brightColor}
-              colorValue={ansiColors[brightColor as keyof typeof ansiColors]}
-            />
+          <div key={color} className="flex gap-2">
+            <div className="w-1/2">
+              <ColorBox
+                colorKey={color}
+                colorValue={ansiColors[color as keyof typeof ansiColors]}
+              />
+            </div>
+            <div className="w-1/2">
+              <ColorBox
+                colorKey={brightColor}
+                colorValue={ansiColors[brightColor as keyof typeof ansiColors]}
+              />
+            </div>
           </div>
         ))}
       </div>

diff --git a/src/components/ColorList.tsx b/src/components/ColorList.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { useTheme } from '@/contexts/ThemeContext'
-import { SyntaxColors } from '@/lib/utils/syntaxColors'
 import Color from 'color'
-import { ColorAliases } from '@/lib/utils/themeColors'
+import type { UIColors, SyntaxColors } from '@/lib/types/colors'
 import { Lock, Unlock, Copy } from 'lucide-react'
 
 import { Button } from './ui/button'
@@ -27,7 +26,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
 
   const colorList = isThemeColors ? colors : syntaxColors
 
-  const displayColors: ColorAliases | SyntaxColors = isThemeColors
+  const displayColors: UIColors | SyntaxColors = isThemeColors
     ? colorList
     : { ...colorList, selector: (colorList as SyntaxColors).selector }
 
@@ -60,22 +59,29 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
   }
 
   return (
-    <div className="mb-4">
-      <h2 className="text-xl font-semibold mb-2">{title}</h2>
-      <div
-        className="grid grid-cols-3 gap-2 p-4"
-        style={{ background: colors.BG1 }}
-      >
+    <div
+      style={{ backgroundColor: colors.BG1 }}
+      className="p-4 border-border border rounded-lg shadow-md"
+    >
+      <div className="flex justify-between">
+        <h2 className="text-xl font-semibold mb-5">{title}</h2>
+        <Button size={'sm'} className="" onClick={handleUnlockAll}>
+          Unlock All
+        </Button>
+      </div>
+      <div className="grid grid-rows-8 grid-flow-col-dense auto-cols-fr gap-2">
         {Object.entries(displayColors).map(([key, value]) => (
           <div key={key} className="relative">
             <div
-              className="w-full h-12 cursor-pointer flex items-center justify-between px-2"
-              style={{ backgroundColor: getDisplayColor(key, value) }}
+              className="h-8 cursor-pointer flex items-center justify-between px-2 rounded-md shadow-sm"
+              style={{ backgroundColor: getDisplayColor(key, value as string) }}
               onClick={() => setActiveColor(key)}
             >
               <span
                 className="text-xs font-semibold truncate"
-                style={{ color: Color(value).isLight() ? '#000' : '#fff' }}
+                style={{
+                  color: Color(value as string).isLight() ? '#000' : '#fff',
+                }}
               >
                 {key}
               </span>
@@ -85,17 +91,17 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
                   className="h-5 w-5"
                   onClick={(e) => {
                     e.stopPropagation()
-                    copyToClipboard(value)
+                    copyToClipboard(value as string)
                   }}
                   style={{
-                    backgroundColor: Color(value).isLight()
+                    backgroundColor: Color(value as string).isLight()
                       ? 'rgba(0,0,0,0.1)'
                       : 'rgba(255,255,255,0.1)',
                   }}
                 >
                   <Copy
                     size={16}
-                    color={Color(value).isLight() ? '#000' : '#fff'}
+                    color={Color(value as string).isLight() ? '#000' : '#fff'}
                   />
                 </Button>
                 <Button
@@ -106,32 +112,27 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
                     toggleColorLock(key)
                   }}
                   style={{
-                    backgroundColor: Color(value).isLight()
+                    backgroundColor: Color(value as string).isLight()
                       ? 'rgba(0,0,0,0.1)'
                       : 'rgba(255,255,255,0.1)',
                   }}
                 >
                   {lockedColors.has(key) ? (
                     <Lock
                       size={16}
-                      color={Color(value).isLight() ? '#000' : '#fff'}
+                      color={Color(value as string).isLight() ? '#000' : '#fff'}
                     />
                   ) : (
                     <Unlock
                       size={16}
-                      color={Color(value).isLight() ? '#000' : '#fff'}
+                      color={Color(value as string).isLight() ? '#000' : '#fff'}
                     />
                   )}
                 </Button>
               </div>
             </div>
           </div>
         ))}
-        <div className="relative self-center place-self-center">
-          <Button size={'sm'} className="" onClick={handleUnlockAll}>
-            Unlock All
-          </Button>
-        </div>
       </div>
     </div>
   )

diff --git a/src/components/ExportSemanticButton.tsx b/src/components/ExportSemanticButton.tsx
@@ -9,6 +9,7 @@ const ExportSemanticButton: React.FC = () => {
 
   const exportSemanticTheme = () => {
     const { themeJSON, themeObject } = generateSemanticThemeJSON(
+      'Generated Color Theme',
       colors,
       syntaxColors,
       ansiColors

diff --git a/src/components/SyntaxColorList.tsx b/src/components/SyntaxColorList.tsx
@@ -1,22 +1,17 @@
 import React from 'react'
-import { useTheme } from '@/contexts/ThemeContext'
-import { SyntaxColors } from '@/lib/utils/syntaxColors'
 import Color from 'color'
-import { ColorAliases } from '@/lib/utils/themeColors'
 import { Lock, Unlock, Copy } from 'lucide-react'
-
 import { Button } from './ui/button'
-import { get } from 'http'
 
-interface ColorListProps {
+import { useTheme } from '@/contexts/ThemeContext'
+
+import type { SyntaxColors, UIColors } from '@/lib/types/colors'
+
+type ColorListProps = {
   title: string
   isThemeColors: boolean
 }
 
-interface DisplayColors {
-  [key: string]: string
-}
-
 const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
   const {
     colors,
@@ -28,7 +23,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
 
   const colorList = isThemeColors ? colors : syntaxColors
 
-  const displayColors: ColorAliases | SyntaxColors = isThemeColors
+  const displayColors: UIColors | SyntaxColors = isThemeColors
     ? colorList
     : { ...colorList, selector: (colorList as SyntaxColors).selector }
 
@@ -61,13 +56,18 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
   }
 
   return (
-    <div className="mb-4">
-      <h2 className="text-xl font-semibold mb-2">{title}</h2>
+    <div
+      style={{ backgroundColor: colors.BG1 }}
+      className="p-4 border-border border rounded-lg shadow-md"
+    >
+      <div className="flex justify-between">
+        <h2 className="text-xl font-semibold mb-5">{title}</h2>
 
-      <div
-        className="grid grid-cols-4 gap-4 p-4"
-        style={{ background: colors.BG1 }}
-      >
+        <Button size={'sm'} className="" onClick={handleUnlockAll}>
+          Unlock All
+        </Button>
+      </div>
+      <div className="grid grid-rows-4 grid-flow-col auto-cols-auto gap-3 w-full">
         {Object.entries(displayColors).map(([key, value]) => (
           <div
             key={key}
@@ -83,7 +83,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
               style={{}}
             >
               <h3
-                className="text-sm truncate first-letter:uppercase pt-1 pb-3"
+                className="text-sm truncate first-letter:uppercase pt-1"
                 style={{
                   color: getDisplayColor(key, value),
                 }}
@@ -126,11 +126,6 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
             </div>
           </div>
         ))}
-        <div className="self-end w-full place-self-center">
-          <Button className="" size={'sm'} onClick={handleUnlockAll}>
-            Unlock All
-          </Button>
-        </div>
       </div>
     </div>
   )