Removed dark hover on buttons

fgatti675 · fgatti675 · commit 1df3102644ae · 2024-12-06T02:41:30.000+01:00
diff --git a/examples/example_next/src/app/(website)/components/HeaderLink.tsx b/examples/example_next/src/app/(website)/components/HeaderLink.tsx
@@ -15,7 +15,7 @@ export function HeaderLink({ href, children, className }: HeaderLinkProps) {
     const isActive = pathname.startsWith(href);
     return (
         <Link href={href}
-              className={cls("block uppercase py-2 text-sm font-semibold hover:text-primary-dark dark:text-surface-300",
+              className={cls("block uppercase py-2 text-sm font-semibold hover:text-secondary dark:text-surface-300",
                   isActive ? 'text-secondary' : 'text-surface-800',
                   className)}>
             {children}
diff --git a/examples/example_next/tailwind.config.js b/examples/example_next/tailwind.config.js
@@ -43,7 +43,6 @@ export default {
             },
             colors: {
                 primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 secondary: "var(--fcms-secondary)",
                 field: {
diff --git a/packages/cli/templates/template_next_pro/src/app/(website)/components/HeaderLink.tsx b/packages/cli/templates/template_next_pro/src/app/(website)/components/HeaderLink.tsx
@@ -15,7 +15,7 @@ export function HeaderLink({ href, children, className }: HeaderLinkProps) {
     const isActive = pathname.startsWith(href);
     return (
         <Link href={href}
-              className={cls("block uppercase py-2 text-sm font-semibold hover:text-primary-dark dark:text-surface-300",
+              className={cls("block uppercase py-2 text-sm font-semibold hover:text-secondary dark:text-surface-300",
                   isActive ? 'text-secondary' : 'text-surface-800',
                   className)}>
             {children}
diff --git a/packages/cli/templates/template_next_pro/tailwind.config.js b/packages/cli/templates/template_next_pro/tailwind.config.js
@@ -43,7 +43,6 @@ export default {
             },
             colors: {
                 primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 secondary: "var(--fcms-secondary)",
                 field: {
diff --git a/packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx b/packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx
@@ -118,11 +118,9 @@ export function useBuildProjectConfig({
     useEffect(() => {
         if (primaryColor) {
             document.documentElement.style.setProperty("--fcms-primary", primaryColor);
-            document.documentElement.style.setProperty("--fcms-primary-dark", darkenColor(primaryColor, 10));
             document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(primaryColor, 10));
         } else {
             document.documentElement.style.setProperty("--fcms-primary", darkenColor(DEFAULT_PRIMARY_COLOR, 10));
-            document.documentElement.style.setProperty("--fcms-primary-dark", darkenColor(DEFAULT_PRIMARY_COLOR, 10));
             document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(DEFAULT_PRIMARY_COLOR, 10));
         }
         if (secondaryColor) {
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -75,7 +75,6 @@ Finally, you need to define your primary and secondary colors in your `index.css
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
@@ -38,8 +38,8 @@ const ButtonInner = React.forwardRef<
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
+        "border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
         "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
 
diff --git a/packages/ui/src/components/Slider.tsx b/packages/ui/src/components/Slider.tsx
@@ -33,7 +33,7 @@ function SliderThumb(props: {
         <TooltipPrimitive.Trigger asChild>
             <SliderPrimitive.Thumb
                 className={cls({
-                        "border-primary bg-primary hover:bg-primary-dark outline-none": !props.props.disabled,
+                        "border-primary bg-primary outline-none": !props.props.disabled,
                         "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
                     },
                     props.classes,
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
@@ -37,7 +37,6 @@ export default {
             },
             colors: {
                 "primary": "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 "secondary": "var(--fcms-secondary)",
                 "field": {
diff --git a/packages/user_management/tailwind.config.js b/packages/user_management/tailwind.config.js
@@ -32,7 +32,6 @@ export default {
             },
             colors: {
                 primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 secondary: "var(--fcms-secondary)",
                 field: {
diff --git a/website/docs/components.mdx b/website/docs/components.mdx
@@ -92,7 +92,6 @@ Finally, you need to define your primary and secondary colors in your `index.css
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/docs/pro/migrating_from_v3_beta.mdx b/website/docs/pro/migrating_from_v3_beta.mdx
@@ -80,7 +80,6 @@ Your `index.css` file should look like this:
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/docs/pro/nextjs.mdx b/website/docs/pro/nextjs.mdx
@@ -125,7 +125,6 @@ Create a file called `index.css` in the `./src/cms` folder with the following co
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/docs/pro/styling_firecms.mdx b/website/docs/pro/styling_firecms.mdx
@@ -48,7 +48,6 @@ in your `index.css` file:
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
@@ -90,7 +89,6 @@ export default {
         extend: {
             colors: {
                 "primary": "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 "secondary": "var(--fcms-secondary)",
                 "field": {
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -35,7 +35,6 @@ export default {
       },
       colors: {
         "primary": "var(--fcms-primary)",
-        "primary-dark": "var(--fcms-primary-dark)",
         "primary-bg": "var(--fcms-primary-bg)",
         "secondary": "var(--fcms-secondary)",
         "field": {

Original file line number	Diff line number	Diff line change
@@ -75,7 +75,6 @@ Finally, you need to define your primary and secondary colors in your `index.css
`75`	`75`
`76`	`76`	`:root {`
`77`	`77`	`--fcms-primary: #0070F4;`
`78`		`- --fcms-primary-dark: #0061e6;`
`79`	`78`	`--fcms-primary-bg: #0061e610;`
`80`	`79`	`--fcms-secondary: #FF5B79;`
`81`	`80`	`}`
Original file line number	Diff line number	Diff line change
@@ -92,7 +92,6 @@ Finally, you need to define your primary and secondary colors in your `index.css
`92`	`92`
`93`	`93`	`:root {`
`94`	`94`	`--fcms-primary: #0070F4;`
`95`		`- --fcms-primary-dark: #0061e6;`
`96`	`95`	`--fcms-primary-bg: #0061e610;`
`97`	`96`	`--fcms-secondary: #FF5B79;`
`98`	`97`	`}`
Original file line number	Diff line number	Diff line change
@@ -80,7 +80,6 @@ Your `index.css` file should look like this:
`80`	`80`
`81`	`81`	`:root {`
`82`	`82`	`--fcms-primary: #0070F4;`
`83`		`- --fcms-primary-dark: #0061e6;`
`84`	`83`	`--fcms-primary-bg: #0061e610;`
`85`	`84`	`--fcms-secondary: #FF5B79;`
`86`	`85`	`}`
Original file line number	Diff line number	Diff line change
@@ -125,7 +125,6 @@ Create a file called `index.css` in the `./src/cms` folder with the following co
`125`	`125`
`126`	`126`	`:root {`
`127`	`127`	`--fcms-primary: #0070F4;`
`128`		`- --fcms-primary-dark: #0061e6;`
`129`	`128`	`--fcms-primary-bg: #0061e610;`
`130`	`129`	`--fcms-secondary: #FF5B79;`
`131`	`130`	`}`