From ab182d6a61c9a6508537414b47d0983fcffdf4cd Mon Sep 17 00:00:00 2001 From: indaviande Date: Tue, 10 Dec 2024 18:07:30 +0100 Subject: [PATCH] add bg-opacity to background + h1 size --- src/components/primitives/Button.tsx | 30 ++++++++-- src/components/primitives/Text.tsx | 87 ++++++++++++++++++---------- src/components/primitives/Title.tsx | 3 +- src/theming/coloring.ts | 21 +++++-- src/theming/tailwind.ts | 2 +- 5 files changed, 100 insertions(+), 43 deletions(-) diff --git a/src/components/primitives/Button.tsx b/src/components/primitives/Button.tsx index 859c58b5d..d39b25127 100644 --- a/src/components/primitives/Button.tsx +++ b/src/components/primitives/Button.tsx @@ -29,7 +29,7 @@ export const buttonStyles = tv( size: "md", }, }, - { twMerge: false }, + { twMerge: false } ); type ButtonStyleProps = VariantProps; @@ -70,7 +70,13 @@ export default function Button({ target="_blank" rel="noopener noreferrer" onClick={() => window.open(to, "_blank", "noopener noreferrer")} - className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}> + className={mergeClass( + styleProps, + styleBold, + className, + disabled && "disabled" + )} + > {children} ); @@ -81,11 +87,17 @@ export default function Button({ + })} + > {children} @@ -95,10 +107,16 @@ export default function Button({ return ( ); diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx index 963b8b74f..367e8684c 100644 --- a/src/components/primitives/Text.tsx +++ b/src/components/primitives/Text.tsx @@ -2,15 +2,36 @@ import { tv } from "tailwind-variants"; import { mergeClass } from "../../utils/css"; import type { Component, Styled } from "../../utils/types"; -export const textStyles = tv({ - base: "font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]", - variants: { - look: { - base: "text-main-11", - soft: "text-main-11", - bold: "text-main-12", - tint: "text-accent-12", - hype: "text-accent-11", +export const textStyles = tv( + { + base: "font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]", + variants: { + look: { + base: "text-main-11", + soft: "text-main-11", + bold: "text-main-12", + tint: "text-accent-12", + hype: "text-accent-11", + }, + size: { + xs: "text-xs", + sm: "text-sm", + md: "text-base", + lg: "text-lg", + xl: "text-xl", + display1: + "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", + 1: "font-title font-bold italic leading-none !text-[clamp(44px,4.333vw+1.125rem,96px)]", + 2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]", + 3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]", + 4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]", + 5: "font-title font-bold leading-normal !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[1.6px] ", + 6: "font-title !text-sm", + }, + interactable: { + true: "cursor-pointer select-none", + false: "", + }, }, size: { xs: "text-xs", @@ -18,7 +39,8 @@ export const textStyles = tv({ md: "text-base", lg: "text-lg", xl: "text-xl", - display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", + display1: + "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", 1: "font-title !text-3xl", 2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]", 3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]", @@ -31,27 +53,32 @@ export const textStyles = tv({ false: "", }, }, - defaultVariants: { - size: "md", - look: "base", - interactable: false, - }, - compoundVariants: [ - { look: "soft", interactable: true, class: "hover:text-main-12" }, - { - look: "base", - interactable: true, - class: "hover:text-main-12 active:text-main-11", - }, - { look: "bold", interactable: true, class: "hover:text-main-12" }, - { look: "tint", interactable: true, class: "hover:text-main-12" }, - { look: "hype", interactable: true, class: "hover:text-main-12" }, - ], -}); + { twMerge: false } +); -export type TextProps = Component & { bold?: boolean }, HTMLParagraphElement>; +export type TextProps = Component< + Styled & { bold?: boolean }, + HTMLParagraphElement +>; -export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) { +export default function Text({ + look, + size, + style, + bold, + interactable, + className, + ...props +}: TextProps) { const styleBold = bold ? "font-bold" : ""; - return

; + return ( +

+ ); } diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx index ce05aaac5..51d131176 100644 --- a/src/components/primitives/Title.tsx +++ b/src/components/primitives/Title.tsx @@ -3,6 +3,7 @@ import { forwardRef } from "react"; import { tv } from "tailwind-variants"; import type { Component, Styled } from "../../utils/types"; import { textStyles } from "./Text"; +import { mergeClass } from "../../utils/css"; export const titleStyles = tv( { @@ -21,7 +22,7 @@ export const titleStyles = tv( look: "base", }, }, - { twMerge: false }, + { twMerge: false } ); export type TitleProps = Component< diff --git a/src/theming/coloring.ts b/src/theming/coloring.ts index be78fe06a..9db09c35a 100644 --- a/src/theming/coloring.ts +++ b/src/theming/coloring.ts @@ -53,11 +53,22 @@ export function extractColorScale(theme: Coloring) { }), ); - const extract = ({ accentScale: accent, grayScale: main, background }: typeof darkOutput | typeof lightOutput) => ({ - accent, - main, - background, - }); + const extract = ({ accentScale: accent, grayScale: main, background }: typeof darkOutput | typeof lightOutput) => { + // Convert background color to RGB components + const getRGB = (color: string) => { + const hex = color.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + return `${r} ${g} ${b}`; + }; + + return { + accent, + main, + background: getRGB(background) + }; + }; return [extract(darkOutput), extract(lightOutput)] satisfies [ReturnType, ReturnType]; } diff --git a/src/theming/tailwind.ts b/src/theming/tailwind.ts index 6c099b40d..97de97812 100644 --- a/src/theming/tailwind.ts +++ b/src/theming/tailwind.ts @@ -9,7 +9,7 @@ export function generateVariableAssigners(): TailwindConfig["theme"] { return { colors: { main: { 0: "transparent", ...generateColorScale("main") }, - background: "var(--background)", + background: "rgb(var(--background) / )", accent: { 0: "transparent", ...generateColorScale("accent") }, }, borderRadius: generateRadiusScale("radius"),