fix: styles

color-kit · Oct 15, 2024 · f0c2d87 · f0c2d87
1 parent e06f848
commit f0c2d87
Show file tree

Hide file tree

Showing 10 changed files with 7,493 additions and 6,221 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -9,26 +9,27 @@
   },
   "dependencies": {
     "@color-kit/palette": "workspace:*",
-    "@heroicons/react": "^2.1.3",
-    "@nextui-org/react": "^2.2.10",
-    "clsx": "^2.1.0",
+    "@heroicons/react": "^2.1.5",
+    "@nextui-org/react": "^2.4.8",
+    "clsx": "^2.1.1",
     "culori": "^4.0.1",
-    "framer-motion": "11.0.22",
-    "jotai": "^2.7.1",
-    "next": "14.1.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "framer-motion": "11.11.8",
+    "jotai": "^2.10.0",
+    "next": "14.2.15",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sugar-high": "^0.7.1",
     "tailwind-plugin-palette": "workspace:*"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.11",
-    "@types/culori": "^2.1.0",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.3"
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/culori": "^2.1.1",
+    "@types/node": "^22.7.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
@@ -3,5 +3,13 @@
 @tailwind utilities;
 
 :root {
-  --slate: #ff0000;
+  --sh-class: #ee5d43;
+  --sh-identifier: #ffe66d;
+  --sh-sign: #8996a3;
+  --sh-property: #f39c12;
+  --sh-entity: #00e8c6;
+  --sh-jsxliterals: #f39c12;
+  --sh-string: #96e072;
+  --sh-keyword: #c74ded;
+  --sh-comment: #a0a1a7cc;
 }
diff --git a/apps/website/src/components/palette/logo.tsx b/apps/website/src/components/palette/logo.tsx
@@ -7,7 +7,7 @@ import { Link } from '@nextui-org/react'
 
 import logo from '~/assets/logo.svg'
 
-const MotionImage = motion(Image)
+const MotionImage = motion.create(Image)
 
 export function PaletteFooter() {
   const [isHovered, setHovered] = useState(false)

diff --git a/apps/website/src/components/palette/tools.tsx b/apps/website/src/components/palette/tools.tsx
@@ -26,6 +26,21 @@ import { randomColor } from '~/utils/color'
 import { useWindowDimensions } from '~/utils/use-window-dimensions'
 
 import { IconButton, colorsAtom, optionsAtom } from './utils'
+import { highlight } from 'sugar-high'
+
+const BASE_DOC = highlight(`import palette, { getTailwindColors } from 'tailwind-plugin-palette'
+
+export default {
+  plugins: [
+    palette({
+      colors: getTailwindColors(400),
+      primary: "#ADCE91",
+      dark: true,
+      reversed: true,
+      harmonize: true
+    })
+  ]
+}`)
 
 export function PaletteTools() {
   const { height = 600 } = useWindowDimensions()
@@ -96,18 +111,20 @@ export function PaletteTools() {
             shape="circle"
             showOutline={false}
           >
-            <ColorPicker
-              className="z-10"
-              onChange={value => {
-                if (!options.primary) {
-                  colors.unshift({ disabled: true, name: 'primary' }, { disabled: true, name: 'secondary' })
-                }
-                startTransition(() => {
-                  setOptions(options => ({ ...options, primary: value }))
-                })
-              }}
-              value={options.primary}
-            />
+            <Tooltip content="Set a primary color">
+              <ColorPicker
+                className="z-10"
+                onChange={value => {
+                  if (!options.primary) {
+                    colors.unshift({ disabled: true, name: 'primary' }, { disabled: true, name: 'secondary' })
+                  }
+                  startTransition(() => {
+                    setOptions(options => ({ ...options, primary: value }))
+                  })
+                }}
+                value={options.primary}
+              />
+            </Tooltip>
           </Badge>
 
           <motion.div className="flex gap-3" layout="position">
@@ -178,45 +195,39 @@ export function PaletteTools() {
                 <Snippet codeString="npm install --save-dev tailwind-plugin-palette" hideSymbol>
                   npm
                 </Snippet>
-                <Snippet codeString="pnpm add --save-dev tailwind-plugin-palette">pnpm</Snippet>
+                <Snippet codeString="pnpm add --save-dev tailwind-plugin-palette" hideSymbol>
+                  pnpm
+                </Snippet>
                 <Snippet codeString="bun add --dev tailwind-plugin-palette" hideSymbol>
                   bun
                 </Snippet>
               </div>
               <h4>2. Configure your tailwind config file</h4>
-              <pre>{`import palette, { getTailwindColors } from 'tailwind-plugin-palette'
-
-export default {
-  plugins: [
-    palette({
-      colors: getTailwindColors(400),
-      primary: "#ADCE91",
-      dark: true,
-      reversed: true,
-      harmonize: true
-    })
-  ]
-}`}</pre>
-              <h4>3. Options</h4>
+              <pre
+                dangerouslySetInnerHTML={{
+                  __html: BASE_DOC,
+                }}
+              ></pre>
+              <h4>Options </h4>
               <ul>
                 <li>
-                  <code>{'colors: Record<string, string>'}</code>: A colors object, where the key is the name of the
-                  color and the value is the hexadecimal value of the color. eg,{' '}
+                  <code className="text-primary">{'colors: Record<string, string>'}</code>: A colors object, where the
+                  key is the name of the color and the value is the hexadecimal value of the color. eg,{' '}
                   <code>{'colors: { red: "#ff0000" }'}</code>
                 </li>
                 <li>
-                  <code>primary: string</code>: Provide a hex value as primary color, automatically generate a secondary
-                  color
+                  <code className="text-primary">primary: string</code>: Provide a hex value as primary color,
+                  automatically generate a secondary color
                 </li>
                 <li>
-                  <code>dark: boolean</code>: Reduce the brightness to adapt to the dark mode
+                  <code className="text-primary">dark: boolean</code>: Reduce the brightness to adapt to the dark mode
                 </li>
                 <li>
-                  <code>reversed: boolean</code>: Reverse the color value
+                  <code className="text-primary">reversed: boolean</code>: Reverse the color value
                 </li>
                 <li>
-                  <code>harmonize: boolean</code>: Make the palette more harmonious with the primary color(primary
-                  required)
+                  <code className="text-primary">harmonize: boolean</code>: Make the palette more harmonious with the
+                  primary color(primary required)
                 </li>
               </ul>
             </div>

diff --git a/apps/website/src/components/palette/utils.tsx b/apps/website/src/components/palette/utils.tsx
@@ -2,7 +2,6 @@ import type { ButtonProps } from '@nextui-org/react'
 
 import { forwardRef } from 'react'
 
-import { motion } from 'framer-motion'
 import { atom } from 'jotai'
 import { createPalette } from 'tailwind-plugin-palette'
 
@@ -11,7 +10,6 @@ import { Button } from '@nextui-org/react'
 export const IconButton = forwardRef(function IconButton(props: ButtonProps, ref: any) {
   return <Button isIconOnly radius="full" {...props} ref={ref} />
 })
-export const MotionIconButton = motion(IconButton)
 
 export type Options = {
   dark?: boolean

diff --git a/package.json b/package.json
@@ -12,18 +12,18 @@
     "version": "changeset version"
   },
   "dependencies": {
-    "@changesets/cli": "^2.27.1"
+    "@changesets/cli": "^2.27.9"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.1.4",
-    "@nnecec/eslint-config": "^0.9.4",
-    "@nnecec/prettier-config": "^0.4.1",
+    "@next/eslint-plugin-next": "^14.2.15",
+    "@nnecec/eslint-config": "^0.10.1",
+    "@nnecec/prettier-config": "^0.4.3",
     "@nnecec/tsconfig": "^0.2.3",
-    "@turbo/gen": "^1.13.0",
-    "eslint": "^8.57.0",
-    "prettier": "^3.2.5",
-    "turbo": "^1.13.0",
-    "typescript": "^5.4.3"
+    "@turbo/gen": "^2.1.3",
+    "eslint": "^9.12.0",
+    "prettier": "^3.3.3",
+    "turbo": "^2.1.3",
+    "typescript": "^5.6.3"
   },
-  "packageManager": "pnpm@8.6.0"
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
 }
diff --git a/packages/palette/package.json b/packages/palette/package.json
@@ -24,12 +24,12 @@
     "dev": "bunchee -w"
   },
   "dependencies": {
-    "@material/material-color-utilities": "^0.2.7",
+    "@material/material-color-utilities": "^0.3.0",
     "culori": "^4.0.1"
   },
   "devDependencies": {
-    "@types/culori": "^2.1.0",
-    "bunchee": "^5.0.0"
+    "@types/culori": "^2.1.1",
+    "bunchee": "^5.5.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/tailwind-plugin-palette/package.json b/packages/tailwind-plugin-palette/package.json
@@ -26,8 +26,8 @@
     "@color-kit/palette": "workspace:*"
   },
   "devDependencies": {
-    "bunchee": "^5.0.0",
-    "tailwindcss": "^3.4.1"
+    "bunchee": "^5.5.1",
+    "tailwindcss": "^3.4.13"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.0"