add random button temporary

Author: programming-with-ia

.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 
 site
 todo_*
+tempCodeRunnerFile.*

README.md

@@ -15,7 +15,7 @@
 ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/programming-with-ia/shadcn-theme-editor)
 ![GitHub top language](https://img.shields.io/github/languages/top/programming-with-ia/shadcn-theme-editor)
 
-![minified size](https://badgen.net/bundlephobia/minzip/shadcn-theme-editor@0.0.5?label=minified_size)
+![minified size](https://badgen.net/bundlephobia/min/shadcn-theme-editor@latest)
 
 [![NPM Version](https://img.shields.io/npm/v/shadcn-theme-editor?logo=npm)](https://www.npmjs.com/package/shadcn-theme-editor)
 [![GitHub](https://img.shields.io/badge/shadcn_theme_editor-161b22?logo=github)](https://github.com/programming-with-ia/shadcn-theme-editor)
@@ -85,11 +85,13 @@ and use
 <ThemeEditor />
 ```
 
-<!-- # Images
+</br>
+
+# Screenshots
 
 <p align="center">
-  <img width="18%" align="center" src="https://raw.githubusercontent.com/zhiyiYo/PyQt-Fluent-Widgets/master/docs/source/_static/logo.png" alt="logo">
-</p> -->
+  <img align="center" src="https://raw.githubusercontent.com/programming-with-ia/shadcn-theme-editor/master/screenshots/shadcn-theme-editor.png" alt="logo">
+</p>
 
 ## 📄 License
 

app/package.json

@@ -47,6 +47,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "colord": "^2.9.3",
     "embla-carousel": "^8.1.8",
     "embla-carousel-react": "^8.1.8",
     "lodash.debounce": "^4.0.8",

app/pnpm-lock.yaml

@@ -3,7 +3,7 @@ import React, { SVGProps } from "react";
 
 function DisplayContainer({ children, className }: { children: React.ReactNode, className?: string }) {
   return (
-    <div className=" drop-shadow-xl lg:w-11/12 xl:w-4/5 mx-auto">
+    <div className=" drop-shadow-xl xl:w-4/5 mx-auto">
       <div className={cn("p-8 md:p-16 lg:p-24 w-[98.6%] bg-card mx-auto rounded-t-xl drop-shadow-lg relative -z-10 flex flex-col items-center", className)}>
         {children}
       </div>

app/src/components/display-container.tsx

@@ -69,7 +69,6 @@ function SideBarColors() {
   }, [currentTheme]);
   return (
     <>
-      {/* <span title="Currently, the `next-themes` feature is not working correctly. I will fix this issue in a later version, or feel free to submit a PR" className="text-muted-foreground px-4 py-2">!ResolvedTheme: {currentTheme}</span> */}
       {colors?.map((color) => (
         <Item
           key={color.variable.replace(/^-+/, "") + currentTheme}

app/src/components/icons.tsx

@@ -40,3 +40,44 @@ export function CopyIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
+
+export const Dices = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-dices"
+    {...props}
+  >
+    <rect width={12} height={12} x={2} y={10} rx={2} ry={2} />
+    <path d="m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6" />
+    <path d="M6 18h.01" />
+    <path d="M10 14h.01" />
+    <path d="M15 6h.01" />
+    <path d="M18 9h.01" />
+  </svg>
+);
+
+export const UnLock = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="#ffffff" {...props}>
+    <g>
+      <path d="M17.44,9.325h-1.1c0-0.97,0.01-1.95,0-2.92c-0.03-2.37-1.96-4.34-4.34-4.34                     c-1.48-0.01-2.82,0.76-3.64,1.97c-0.36,0.53,0.51,1.03,0.87,0.5c1.2-1.77,3.78-1.96,5.23-0.39c1.04,1.11,0.88,2.57,0.88,3.96v1.22                     H6.56c-1.38,0-2.5,1.12-2.5,2.5v7.61c0,1.37,1.12,2.5,2.5,2.5h10.88c1.38,0,2.5-1.13,2.5-2.5v-7.61                     C19.94,10.445,18.82,9.325,17.44,9.325z M18.94,19.435c0,0.82-0.68,1.5-1.5,1.5H6.56c-0.82,0-1.5-0.68-1.5-1.5v-7.61                     c0-0.83,0.68-1.5,1.5-1.5h10.88c0.82,0,1.5,0.67,1.5,1.5V19.435z" />
+      <path d="M13,14.945c0,0.37-0.2,0.69-0.5,0.86v1.5c0,0.28-0.23,0.49-0.5,0.5s-0.5-0.24-0.5-0.5v-1.5                     c-0.3-0.17-0.5-0.49-0.5-0.86c0-0.55,0.45-1,1-1S13,14.395,13,14.945z" />
+    </g>
+  </svg>
+);
+
+export const Lock = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={32} height={32} viewBox="0 0 24 24" fill="#ffffff" {...props}>
+    <g>
+      <path d="M17.44,9.33h-1.1V6.4c0-2.39-1.95-4.34-4.34-4.34S7.66,4.01,7.66,6.4v2.93h-1.1                     c-1.38,0-2.5,1.12-2.5,2.5v7.61c0,1.37,1.12,2.5,2.5,2.5h10.88c1.38,0,2.5-1.13,2.5-2.5v-7.61C19.94,10.45,18.82,9.33,17.44,9.33z                     M8.66,6.4c0-1.84,1.5-3.34,3.34-3.34s3.34,1.5,3.34,3.34v2.93H8.66V6.4z M18.94,19.44c0,0.82-0.68,1.5-1.5,1.5H6.56                     c-0.82,0-1.5-0.68-1.5-1.5v-7.61c0-0.83,0.68-1.5,1.5-1.5h10.88c0.82,0,1.5,0.67,1.5,1.5V19.44z" />
+      <path d="M13,14.95c0,0.37-0.2,0.69-0.5,0.86v1.5c0,0.28-0.23,0.49-0.5,0.5s-0.5-0.24-0.5-0.5v-1.5                     c-0.3-0.17-0.5-0.49-0.5-0.86c0-0.55,0.45-1,1-1S13,14.4,13,14.95z" />
+    </g>
+  </svg>
+);

src/components/SideBarColors.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Button } from './ui/button'
+import { createRandomTheme } from '../lib/create-theme-config'
+import { useTheme } from 'next-themes'
+import { getComputedHSLColor, setColorsProperties } from '../lib/utils'
+import { Dices, Lock, UnLock } from './icons';
+
+function RandomBtn() {
+    const { systemTheme } = useTheme()
+    const [lockPrimary, setLockPrimary] = useState(true);
+    const onClickHandler = ()=>{
+        const themes = createRandomTheme(lockPrimary ? getComputedHSLColor("--primary"): undefined)
+        const theme = themes[systemTheme!] ?? themes.dark
+        // const theme = themes.dark
+        console.log(theme)
+        setColorsProperties(theme)
+    }
+    const LockIcon = lockPrimary? Lock: UnLock
+  return (
+    <Button onClick={onClickHandler} title={'Generate Random theme, Primary is '+(lockPrimary? "locked": "not locked")} variant={"colorbtn"} className='cursor-pointer'>
+        <Dices className='size-5' /> Randomize <LockIcon onClick={(e)=>console.log(setLockPrimary(!lockPrimary), lockPrimary, e.stopPropagation())} aria-label={(lockPrimary ?'unlock' : 'lock')+ ' primary color'} className='ml-auto size-6 hover:opacity-80 rounded-md hover:bg-background hover:fill-foreground p-0.5 fill-current'/>
+    </Button>
+  )
+}
+
+export default RandomBtn

src/components/icons.tsx

@@ -3,13 +3,14 @@ import { cn } from "../lib/utils";
 import SideBarColors from "./SideBarColors";
 import { CopyTheme } from "./copy-theme";
 import ThemeToggle from "./theme-toggle";
+import RandomBtn from "./random";
 
 export function Sidebar({ isOpen }: { isOpen: boolean }) {
   return (
     <aside
       role="dialog"
       className={cn(
-        "fixed customScrollBar transition-colors duration-500 left-0 inset-y-0 z-50 hidden h-screen max-h-screen w-fit shrink-0 bg-background overflow-y-auto py-6 pl-8 pr-6 lg:py-8 border-r-2 shadow-md drop-shadow-sm",
+        "fixed customScrollBar duration-500 left-0 inset-y-0 z-50 hidden h-screen max-h-screen w-fit shrink-0 bg-background overflow-y-auto py-6 pl-8 pr-6 lg:py-8 border-r-2 shadow-md drop-shadow-sm",
         isOpen && "md:flex flex-col"
       )}
     >
@@ -26,6 +27,8 @@ export function Sidebar({ isOpen }: { isOpen: boolean }) {
 
       <div className="text-sm flex flex-col flex-1">
         <SideBarColors />
+        <hr className="my-2" />
+        <RandomBtn />
       </div>
       <footer className="flex flex-col gap-2 text-sm pt-4 mt-2 border-t -mb-4">
         <div className="flex flex-wrap justify-between gap-2">