Skip to content

Commit

Permalink
chore: lint tailwind variant classes (#67)
Browse files Browse the repository at this point in the history
  • Loading branch information
jrasm91 authored Jan 9, 2025
1 parent c772629 commit ec8e9b3
Show file tree
Hide file tree
Showing 12 changed files with 31 additions and 25 deletions.
1 change: 1 addition & 0 deletions .prettierrc
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit ec8e9b3

Please sign in to comment.