global text styles, tailwind config

This commit is contained in:
Max Peintner
2023-04-25 09:16:19 +02:00
parent d1d54d2180
commit ee53505612
14 changed files with 98 additions and 34 deletions

View File

@@ -58,7 +58,7 @@ export const Avatar: FC<AvatarProps> = ({
return (
<div
className={`w-full h-full flex-shrink-0 flex justify-center items-center cursor-default pointer-events-none group-focus:outline-none group-focus:ring-2 transition-colors duration-200 dark:group-focus:ring-offset-blue bg-primary-light-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-500 group-focus:ring-primary-light-200 dark:group-focus:ring-primary-dark-400 dark:bg-primary-dark-300 text-white dark:text-blue rounded-full ${
className={`w-full h-full flex-shrink-0 flex justify-center items-center cursor-default pointer-events-none group-focus:outline-none group-focus:ring-2 transition-colors duration-200 dark:group-focus:ring-offset-blue bg-primary-light-500 text-primary-light-contrast-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-500 group-focus:ring-primary-light-200 dark:group-focus:ring-primary-dark-400 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 dark:text-blue rounded-full ${
shadow ? "shadow" : ""
} ${
size === AvatarSize.LARGE

View File

@@ -41,7 +41,7 @@ export const getButtonClasses = (
true,
"shadow hover:shadow-xl active:shadow-xl disabled:border-none disabled:bg-gray-300 disabled:text-gray-600 disabled:cursor-not-allowed disabled:dark:bg-gray-800 disabled:dark:text-gray-900":
variant === ButtonVariants.Primary,
"bg-primary-light-500 dark:bg-primary-dark-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-400 text-primary-light-contrast dark:text-primary-dark-contrast":
"bg-primary-light-500 dark:bg-primary-dark-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-400 text-primary-light-contrast-500 dark:text-primary-dark-contrast-500":
variant === ButtonVariants.Primary && color !== ButtonColors.Warn,
"bg-warn-light-500 dark:bg-warn-dark-500 hover:bg-warn-light-400 hover:dark:bg-warn-dark-400 text-white dark:text-white":
variant === ButtonVariants.Primary && color === ButtonColors.Warn,

View File

@@ -55,7 +55,7 @@ export function GlobalNav() {
{demos.map((section) => {
return (
<div key={section.name}>
<div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-600">
<div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-text-light dark:text-text-dark">
<div>{section.name}</div>
</div>
@@ -90,9 +90,9 @@ function GlobalNavItem({
className={clsx(
"block rounded-md px-3 py-2 text-sm font-medium hover:text-black dark:hover:text-gray-300",
{
"text-gray-500 dark:text-gray-500 hover:bg-gray-100 hover:dark:bg-gray-800":
"text-text-light-secondary dark:text-text-dark-secondary hover:text-text-light hover:dark:text-text-dark":
!isActive,
"text-gray-800 dark:text-gray-200": isActive,
"text-primary-light-500 dark:text-primary-dark-500": isActive,
}
)}
>

View File

@@ -7,8 +7,8 @@ type Props = {
};
export function LayoutProviders({ children }: Props) {
const { resolvedTheme } = useTheme();
const isDark = resolvedTheme && resolvedTheme === "dark";
// const { resolvedTheme } = useTheme();
const isDark = false; //resolvedTheme && resolvedTheme === "dark";
// useEffect(() => {
// console.log("layoutproviders useeffect");