goaway windy radix palette.

HolodexNet · Oct 8, 2023 · b433f06 · b433f06
1 parent b713e4c
commit b433f06
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 44 deletions.
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -56,6 +56,8 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "lightningcss": "^1.22.0",
     "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "postcss-import-ext-glob": "^2.1.1",
     "prettier": "^3.0.3",
     "react-git-info": "^2.0.1",
     "rollup-plugin-bundle-analyzer": "^1.6.6",
@@ -65,7 +67,6 @@
     "typescript-plugin-css-modules": "^5.0.1",
     "unocss": "^0.56.4",
     "unocss-preset-autoprefixer": "^0.0.6",
-    "vite": "^4.4.9",
-    "windy-radix-palette": "^1.0.0"
+    "vite": "^4.4.9"
   }
 }
diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js
@@ -2,5 +2,7 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-import-ext-glob': {},
+    'postcss-import': {},
   },
 }
diff --git a/packages/react/src/hooks/useTheme.ts b/packages/react/src/hooks/useTheme.ts
@@ -9,15 +9,14 @@ export const darkAtom = atomWithStorageBroadcast('theme-dark', true);
 
 
 const setCssVariable = (property: string, targetColor: string, alpha: boolean = false) => {
-  const A = alpha ? 'A' : ''
+  const A = alpha ? 'a' : ''
   for (let i = 1; i <= 12; i++) {
     const propertyLevel = `--${property}-${A}${i}`
-    document.documentElement.style.setProperty(propertyLevel, `rgb(var(--${targetColor}${A}${i}))`);
+    document.documentElement.style.setProperty(propertyLevel, `var(--${targetColor}-${A}${i})`);
   }
 };
 
 
-
 export function useThemeInit() {
 
   const [base] = useAtom(baseAtom)
@@ -33,6 +32,7 @@ export function useThemeInit() {
     setCssVariable('primary', primary);
     setCssVariable('primary', primary, true);
   }, [primary]);
+
   useEffect(() => {
     setCssVariable('secondary', secondary);
     setCssVariable('secondary', secondary, true);

diff --git a/packages/react/src/index.css b/packages/react/src/index.css
@@ -1,7 +1,10 @@
+@import-glob "../node_modules/@radix-ui/colors/*.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --radius: 0.5rem;

diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx
@@ -10,14 +10,12 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary-2 text-primary-11 text-primary hover:bg-primary-4",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-primary-2 text-base-12 hover:bg-primaryA-4",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+          "border border-primary-7 bg-transparent hover:bg-primaryA-4 hover:border-primaryA-8",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-secondary-2 text-base-12 hover:bg-secondaryA-4",
+        ghost: "hover:bg-primary-1 hover:text-base-12",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js
@@ -1,20 +1,26 @@
-import * as createPlugin from "windy-radix-palette";
+import * as colors from "@radix-ui/colors"
 
-
-console.log(createPlugin);
-const colors = createPlugin.default();
-
-function getColorSpace(name, alpha) {
-  const a = alpha ? 'A' : ''
-  var colorspace = { "DEFAULT": "var(--primary-9)" }
+function getColorSpace(name) {
+  let alpha = false
+  if (name.endsWith("A")) {
+    name = name.substring(0, name.length - 1)
+    alpha = true
+  }
+  var colorspace = { "DEFAULT": `var(--${name}-${alpha ? 'a' : ''}9)` }
   for (var i = 1; i <= 12; i++) {
-    const color = `--${name}-${a}${i}`;
-    colorspace[i] = `var(${color})`
+    colorspace[i] = `var(--${name}-${alpha ? 'a' : ''}${i})`
   }
   return colorspace
 }
 
-console.log(getColorSpace('primary'))
+console.log(Object.keys(colors).filter(x => !(x.includes("P3") || x.includes("Dark"))).map(x => {
+  return [
+    x,
+    getColorSpace(x)
+  ]
+}).reduce((prev, cur) => ({ ...prev, [cur[0]]: cur[1] }), {}))
+
+console.log(getColorSpace('primaryA'))
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -37,9 +43,9 @@ module.exports = {
       colors: {
         base: getColorSpace("base"),
         primary: getColorSpace("primary"),
-        "primaryA": getColorSpace("primary", true),
+        "primaryA": getColorSpace("primaryA"),
         secondary: getColorSpace("secondary"),
-        "secondaryA": getColorSpace("secondary", true),
+        "secondaryA": getColorSpace("secondaryA"),
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -62,5 +68,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), colors.handler],
+  plugins: [require("tailwindcss-animate")],
 }