style(app): normalize tailwind utility syntax
This commit is contained in:
@@ -17,7 +17,7 @@ describe("shared Tailwind components", () => {
|
||||
expect(linkHtml).toContain('href="/chat"');
|
||||
expect(linkHtml).toContain('aria-label="Back to chat"');
|
||||
expect(linkHtml).toContain("inline-flex");
|
||||
expect(linkHtml).toContain("size-[var(--responsive-icon-button-size,42px)]");
|
||||
expect(linkHtml).toContain("size-(--responsive-icon-button-size,42px)");
|
||||
expect(linkHtml).toContain("hover:bg-white");
|
||||
expect(actionHtml).toContain("<button");
|
||||
expect(actionHtml).toContain("size-8");
|
||||
|
||||
@@ -23,15 +23,15 @@ type BackButtonActionProps = BackButtonBaseProps & {
|
||||
export type BackButtonProps = BackButtonLinkProps | BackButtonActionProps;
|
||||
|
||||
const BASE_CLASS_NAME =
|
||||
"inline-flex cursor-pointer items-center justify-center rounded-full border-0 p-0 text-[var(--color-auth-text-primary)] no-underline transition-[background,box-shadow,transform] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]";
|
||||
"inline-flex cursor-pointer items-center justify-center rounded-full border-0 p-0 text-(--color-auth-text-primary) no-underline transition-[background,box-shadow,transform] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]";
|
||||
|
||||
const VARIANT_CLASS_NAMES = {
|
||||
floating:
|
||||
"absolute left-[calc(var(--spacing-xl,20px)+var(--app-safe-left,0px))] top-[calc(var(--spacing-xl,20px)+var(--app-safe-top,0px))] z-[2] size-[var(--back-button-size)] bg-[var(--color-auth-surface)] pr-[2px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] hover:bg-[rgba(0,0,0,0.04)] active:scale-[0.96]",
|
||||
"absolute left-[calc(var(--spacing-xl,20px)+var(--app-safe-left,0px))] top-[calc(var(--spacing-xl,20px)+var(--app-safe-top,0px))] z-2 size-(--back-button-size) bg-(--color-auth-surface) pr-[2px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] hover:bg-[rgba(0,0,0,0.04)] active:scale-96",
|
||||
soft:
|
||||
"size-[var(--responsive-icon-button-size,42px)] border border-[rgba(25,19,22,0.08)] bg-[rgba(255,255,255,0.82)] text-[#21191d] shadow-[0_10px_22px_rgba(50,30,40,0.08)] hover:-translate-y-px hover:bg-white hover:shadow-[0_14px_26px_rgba(50,30,40,0.12)] active:translate-y-px",
|
||||
"size-(--responsive-icon-button-size,42px) border border-[rgba(25,19,22,0.08)] bg-[rgba(255,255,255,0.82)] text-[#21191d] shadow-[0_10px_22px_rgba(50,30,40,0.08)] hover:-translate-y-px hover:bg-white hover:shadow-[0_14px_26px_rgba(50,30,40,0.12)] active:translate-y-px",
|
||||
ghost:
|
||||
"size-8 bg-transparent text-black hover:opacity-70 active:scale-[0.96]",
|
||||
"size-8 bg-transparent text-black hover:opacity-70 active:scale-96",
|
||||
} satisfies Record<NonNullable<BackButtonBaseProps["variant"]>, string>;
|
||||
|
||||
export function BackButton({
|
||||
|
||||
@@ -30,7 +30,7 @@ export function CharacterAvatar({
|
||||
return (
|
||||
<span
|
||||
className={[
|
||||
"inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--color-avatar-border,#fbf3f5)]",
|
||||
"inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--color-avatar-border,#fbf3f5)",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
|
||||
@@ -45,13 +45,13 @@ describe("core Tailwind components", () => {
|
||||
expect(checkedHtml).toContain('role="checkbox"');
|
||||
expect(checkedHtml).toContain('aria-checked="true"');
|
||||
expect(checkedHtml).toContain('aria-label="Accept terms"');
|
||||
expect(checkedHtml).toContain("size-[var(--auth-legal-checkbox-size)]");
|
||||
expect(checkedHtml).toContain("size-(--auth-legal-checkbox-size)");
|
||||
expect(checkedHtml).toContain(
|
||||
"size-[var(--auth-legal-checkbox-inner-size)]",
|
||||
"size-(--auth-legal-checkbox-inner-size)",
|
||||
);
|
||||
expect(labeledHtml).toContain("<label");
|
||||
expect(labeledHtml).toContain("Keep me signed in");
|
||||
expect(labeledHtml).toContain("gap-[var(--spacing-sm)]");
|
||||
expect(labeledHtml).toContain("gap-(--spacing-sm)");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -29,7 +29,7 @@ export function Checkbox({
|
||||
ariaLabel,
|
||||
}: CheckboxProps) {
|
||||
const checkboxClassName = [
|
||||
"mt-0.5 inline-flex size-[var(--auth-legal-checkbox-size)] shrink-0 cursor-pointer items-center justify-center rounded-full border border-[var(--color-auth-surface)] bg-[var(--color-auth-surface)] p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.06)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"mt-0.5 inline-flex size-(--auth-legal-checkbox-size) shrink-0 cursor-pointer items-center justify-center rounded-full border border-(--color-auth-surface) bg-(--color-auth-surface) p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.06)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) disabled:cursor-not-allowed disabled:opacity-50",
|
||||
].join(" ");
|
||||
const button = (
|
||||
<button
|
||||
@@ -42,7 +42,7 @@ export function Checkbox({
|
||||
className={checkboxClassName}
|
||||
>
|
||||
{checked ? (
|
||||
<span className="block size-[var(--auth-legal-checkbox-inner-size)] rounded-full bg-[var(--color-auth-legal-check)]" />
|
||||
<span className="block size-(--auth-legal-checkbox-inner-size) rounded-full bg-(--color-auth-legal-check)" />
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
@@ -58,14 +58,14 @@ export function Checkbox({
|
||||
return (
|
||||
<label
|
||||
className={[
|
||||
"flex w-full cursor-pointer items-start gap-[var(--spacing-sm)]",
|
||||
"flex w-full cursor-pointer items-start gap-(--spacing-sm)",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{button}
|
||||
<span className="flex-auto text-left text-[var(--font-size-sm)] leading-[1.4] text-[var(--color-auth-text-primary)]">
|
||||
<span className="flex-auto text-left text-(length:--font-size-sm) leading-[1.4] text-(--color-auth-text-primary)">
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -43,7 +43,7 @@ export function LoadingIndicator({
|
||||
style={style}
|
||||
/>
|
||||
{label ? (
|
||||
<span className="text-[var(--font-size-sm)] text-text-secondary">
|
||||
<span className="text-(length:--font-size-sm) text-text-secondary">
|
||||
{label}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
@@ -14,7 +14,7 @@ export function UserMessageAvatar({
|
||||
size = 43,
|
||||
}: UserMessageAvatarProps) {
|
||||
const avatarClassName = [
|
||||
"flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-[var(--color-avatar-border,#fbf3f5)] bg-[var(--color-avatar-border,#fbf3f5)] shadow-[var(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))]",
|
||||
"flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
|
||||
Reference in New Issue
Block a user