From 913e43605a7b0c1cf8729892709b7ea9ae3d5d46 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Mon, 29 Jul 2024 21:03:37 +0200 Subject: [PATCH] chore: finish toggle color config --- .../profile/_components/RecentActivity.tsx | 1 - src/v2/components/ui/Toggle.tsx | 68 ++----------------- 2 files changed, 5 insertions(+), 64 deletions(-) diff --git a/src/app/(marketing)/profile/_components/RecentActivity.tsx b/src/app/(marketing)/profile/_components/RecentActivity.tsx index de3058b3b3..40d2e56343 100644 --- a/src/app/(marketing)/profile/_components/RecentActivity.tsx +++ b/src/app/(marketing)/profile/_components/RecentActivity.tsx @@ -16,7 +16,6 @@ export const RecentActivity = () => { <> diff --git a/src/v2/components/ui/Toggle.tsx b/src/v2/components/ui/Toggle.tsx index e3e754f2f2..f9d7c813f2 100644 --- a/src/v2/components/ui/Toggle.tsx +++ b/src/v2/components/ui/Toggle.tsx @@ -5,59 +5,8 @@ import * as TogglePrimitive from "@radix-ui/react-toggle" import { type VariantProps, cva } from "class-variance-authority" import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react" -const buttonVariants = cva( - "font-semibold inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base text-ellipsis overflow-hidden gap-1.5", - { - variants: { - variant: { - solid: - "bg-[hsl(var(--button-bg))] hover:bg-[hsl(var(--button-bg-hover))] active:bg-[hsl(var(--button-bg-active))] text-[hsl(var(--button-foreground))]", - ghost: - "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))]", - subtle: - "bg-[hsl(var(--button-bg-subtle)/0.12)] hover:bg-[hsl(var(--button-bg-subtle)/0.24)] active:bg-[hsl(var(--button-bg-subtle)/0.36)] text-[hsl(var(--button-foreground-subtle))]", - outline: - "bg-[hsl(var(--button-bg-subtle)/0)] hover:bg-[hsl(var(--button-bg-subtle)/0.12)] active:bg-[hsl(var(--button-bg-subtle)/0.24)] text-[hsl(var(--button-foreground-subtle))] border-2 border-[hsl(var(--button-foreground-subtle))]", - unstyled: "", - }, - // TODO: we could extract this to a Tailwind plugin - colorScheme: { - primary: - "[--button-bg:var(--primary)] [--button-bg-hover:var(--primary-hover)] [--button-bg-active:var(--primary-active)] [--button-foreground:var(--primary-foreground)] [--button-bg-subtle:var(--primary-subtle)] [--button-foreground-subtle:var(--primary-subtle-foreground)]", - secondary: - "[--button-bg:var(--secondary)] [--button-bg-hover:var(--secondary-hover)] [--button-bg-active:var(--secondary-active)] [--button-foreground:var(--secondary-foreground)] [--button-bg-subtle:var(--secondary-subtle)] [--button-foreground-subtle:var(--secondary-subtle-foreground)]", - info: "[--button-bg:var(--info)] [--button-bg-hover:var(--info-hover)] [--button-bg-active:var(--info-active)] [--button-foreground:var(--info-foreground)] [--button-bg-subtle:var(--info-subtle)] [--button-foreground-subtle:var(--info-subtle-foreground)]", - destructive: - "[--button-bg:var(--destructive)] [--button-bg-hover:var(--destructive-hover)] [--button-bg-active:var(--destructive-active)] [--button-foreground:var(--destructive-foreground)] [--button-bg-subtle:var(--destructive-subtle)] [--button-foreground-subtle:var(--destructive-subtle-foreground)]", - success: - "[--button-bg:var(--success)] [--button-bg-hover:var(--success-hover)] [--button-bg-active:var(--success-active)] [--button-foreground:var(--success-foreground)] [--button-bg-subtle:var(--success-subtle)] [--button-foreground-subtle:var(--success-subtle-foreground)]", - }, - size: { - xs: "h-6 px-2 text-xs gap-1", - sm: "h-8 px-3 text-sm", - md: "h-11 px-4 py-2", - lg: "h-12 px-6 py-4 text-lg", - xl: "h-14 px-6 py-4 text-lg gap-2", - icon: "h-10 w-10", - }, - }, - compoundVariants: [ - { - colorScheme: "secondary", - variant: "outline", - className: "border-[hsl(var(--secondary))]", - }, - ], - defaultVariants: { - variant: "solid", - colorScheme: "secondary", - size: "md", - }, - } -) - const toggleVariants = cva( - "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium", + "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium data-[state=on]:bg-primary data-[state=on]:text-primary-foreground", { variants: { variant: { @@ -65,10 +14,8 @@ const toggleVariants = cva( "bg-[hsl(var(--toggle-bg))] hover:bg-[hsl(var(--toggle-bg-hover))] active:bg-[hsl(var(--toggle-bg-active))] text-[hsl(var(--toggle-foreground))]", ghost: "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))]", - subtle: [ + subtle: "bg-[hsl(var(--toggle-bg-subtle)/0.12)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.24)] active:bg-[hsl(var(--toggle-bg-subtle)/0.36)] text-[hsl(var(--toggle-foreground-subtle))]", - "data-[state=on]:bg-[hsl(var(--toggle-bg))] data-[state=on]:text-primary-foreground", - ], outline: "bg-[hsl(var(--toggle-bg-subtle)/0)] hover:bg-[hsl(var(--toggle-bg-subtle)/0.12)] active:bg-[hsl(var(--toggle-bg-subtle)/0.24)] text-[hsl(var(--toggle-foreground-subtle))] border-2 border-[hsl(var(--toggle-foreground-subtle))]", unstyled: "", @@ -79,11 +26,6 @@ const toggleVariants = cva( "[--toggle-bg:var(--primary)] [--toggle-bg-hover:var(--primary-hover)] [--toggle-bg-active:var(--primary-active)] [--toggle-foreground:var(--primary-foreground)] [--toggle-bg-subtle:var(--primary-subtle)] [--toggle-foreground-subtle:var(--primary-subtle-foreground)]", secondary: "[--toggle-bg:var(--secondary)] [--toggle-bg-hover:var(--secondary-hover)] [--toggle-bg-active:var(--secondary-active)] [--toggle-foreground:var(--secondary-foreground)] [--toggle-bg-subtle:var(--secondary-subtle)] [--toggle-foreground-subtle:var(--secondary-subtle-foreground)]", - info: "[--toggle-bg:var(--info)] [--toggle-bg-hover:var(--info-hover)] [--toggle-bg-active:var(--info-active)] [--toggle-foreground:var(--info-foreground)] [--toggle-bg-subtle:var(--info-subtle)] [--toggle-foreground-subtle:var(--info-subtle-foreground)]", - destructive: - "[--toggle-bg:var(--destructive)] [--toggle-bg-hover:var(--destructive-hover)] [--toggle-bg-active:var(--destructive-active)] [--toggle-foreground:var(--destructive-foreground)] [--toggle-bg-subtle:var(--destructive-subtle)] [--toggle-foreground-subtle:var(--destructive-subtle-foreground)]", - success: - "[--toggle-bg:var(--success)] [--toggle-bg-hover:var(--success-hover)] [--toggle-bg-active:var(--success-active)] [--toggle-foreground:var(--success-foreground)] [--toggle-bg-subtle:var(--success-subtle)] [--toggle-foreground-subtle:var(--success-subtle-foreground)]", }, size: { sm: "h-8 px-2.5", @@ -94,14 +36,14 @@ const toggleVariants = cva( }, compoundVariants: [ { - colorScheme: "primary", + colorScheme: "secondary", variant: "outline", - className: "border-[hsl(var(--primary))]", + className: "border-[hsl(var(--secondary))]", }, ], defaultVariants: { variant: "solid", - colorScheme: "primary", + colorScheme: "secondary", size: "md", }, }