Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: lint tailwind variant classes #67

Merged
merged 1 commit into from
Jan 9, 2025
Merged

chore: lint tailwind variant classes #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"trailingComma": "all",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"tailwindFunctions": ["tv"],
"overrides": [
{
"files": "*.svelte",
Expand Down
5 changes: 5 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"tailwindCSS.experimental.classRegex": [
["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}
12 changes: 6 additions & 6 deletions src/lib/components/Avatar/Avatar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
base: 'flex h-full w-full select-none items-center justify-center font-medium',
variants: {
size: {
tiny: 'w-5 h-5 text-xs',
small: 'w-7 h-7 text-sm',
medium: 'w-10 h-10 text-md',
large: 'w-12 h-12 text-lg',
giant: 'w-16 h-16 text-xl',
tiny: 'h-5 w-5 text-xs',
small: 'h-7 w-7 text-sm',
medium: 'text-md h-10 w-10',
large: 'h-12 w-12 text-lg',
giant: 'h-16 w-16 text-xl',
},
color: {
primary: 'bg-primary text-light',
Expand All @@ -46,7 +46,7 @@
});

const wrapper = tv({
base: 'overflow-hidden shadow-md rounded rounded-full',
base: 'overflow-hidden rounded-full shadow-md',
});

const getInitials = (name: string) => {
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Card/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@
});

const cardStyles = tv({
base: 'flex flex-col w-full h-full',
base: 'flex h-full w-full flex-col',
variants: {
color: {
primary: 'bg-primary/25 dark:bg-primary/25',
secondary: 'bg-dark/5 dark:bg-dark/25 text-dark',
secondary: 'bg-dark/5 text-dark dark:bg-dark/25',
success: 'bg-success/15 dark:bg-success/30',
danger: 'bg-danger/15 dark:bg-danger/50',
warning: 'bg-warning/25 dark:bg-warning/50',
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Code/Code.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

filledColor: {
false: '',
muted: 'bg-gray-600 dark:bg-gray-800 text-light',
muted: 'bg-gray-600 text-light dark:bg-gray-800',
primary: 'bg-primary text-light',
secondary: 'bg-dark text-light',
success: 'bg-success text-light',
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Form/Checkbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
} = $derived(getFieldContext());

const containerStyles = tv({
base: 'border-2 ring-offset-background focus-visible:ring-ring peer box-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden',
base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50',
variants: {
shape: {
rectangle: 'rounded-none',
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Form/Input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
});

const inputStyles = tv({
base: 'w-full outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75',
variants: {
shape: {
rectangle: 'rounded-none',
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Modal/Modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
}: Props = $props();

const modalStyles = tv({
base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
variants: {
size: {
tiny: 'h-full sm:h-min md:max-w-64',
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Navbar/NavbarItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
let { href, title, active = false, ...iconProps }: Props = $props();

const styles = tv({
base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 pl-5 group-hover:sm:px-5 md:px-5',
base: 'flex w-full place-items-center gap-4 rounded-r-full py-3 pl-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:px-5',
variants: {
active: {
true: 'bg-primary/10 text-primary',
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/SupporterBadge/SupporterBadge.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
};

const containerStyles = tv({
base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
variants: {
size: {
tiny: 'px-2 py-1',
Expand All @@ -34,8 +34,8 @@
giant: 'px-3 py-2',
},
effect: {
hover: 'border border-dark/25 supporter-effect-hover',
always: 'shadow supporter-effect',
hover: 'supporter-effect-hover border border-dark/25',
always: 'supporter-effect shadow',
},
},
});
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Switch/Switch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
});

const bar = tv({
base: 'w-12 h-3 my-2 rounded-full border border-transparent',
base: 'my-2 h-3 w-12 rounded-full border border-transparent',
variants: {
fillColor: {
default: 'bg-gray-400',
Expand All @@ -58,7 +58,7 @@
});

const dot = tv({
base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]',
variants: {
checked: {
true: 'translate-x-6',
Expand Down
14 changes: 7 additions & 7 deletions src/lib/internal/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
iconSize: {
tiny: 'h-4 w-4 text-xs',
small: 'h-6 w-6 text-sm',
medium: 'h-8 w-8 text-md',
medium: 'text-md h-8 w-8',
large: 'h-10 w-10 text-lg',
giant: 'h-12 w-12 text-lg',
},
Expand All @@ -77,12 +77,12 @@
info: 'bg-info text-light hover:bg-info/80',
},
outlineColor: {
primary: 'bg-primary/10 text-primary border border-primary hover:bg-primary/20',
secondary: 'bg-dark/10 text-dark border border-dark hover:bg-dark/20',
success: 'bg-success/10 text-success border border-success hover:bg-success/20',
danger: 'bg-danger/10 text-danger border border-danger hover:bg-danger/20',
warning: 'bg-warning/10 text-warning border border-warning hover:bg-warning/20',
info: 'bg-info/10 text-info border border-info hover:bg-info/20',
primary: 'border border-primary bg-primary/10 text-primary hover:bg-primary/20',
secondary: 'border border-dark bg-dark/10 text-dark hover:bg-dark/20',
success: 'border border-success bg-success/10 text-success hover:bg-success/20',
danger: 'border border-danger bg-danger/10 text-danger hover:bg-danger/20',
warning: 'border border-warning bg-warning/10 text-warning hover:bg-warning/20',
info: 'border border-info bg-info/10 text-info hover:bg-info/20',
},
ghostColor: {
primary: 'text-primary hover:bg-primary/10',
Expand Down
Loading