flo-bit.dev / flo-bit.github.io
[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte flo-bit.dev/
portfolio portfolio-website svelte sveltekit tailwind threejs threlte typescript
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

flo-bit.github.io / src / lib / components / badge / index.ts
13 kB 168 lines
1import { tv, type VariantProps } from 'tailwind-variants'; 2export { default as Badge } from './badge.svelte'; 3 4export const badgeVariants = tv({ 5 base: 'inline-flex items-center gap-x-1.5 px-2 py-1 text-xs font-medium transition-colors select-none ring-inset ring-accent-600/20 dark:ring-accent-500/20', 6 variants: { 7 variant: { 8 default: 9 'rounded-md bg-accent-50 dark:bg-accent-500/10 text-accent-700 dark:text-accent-400 ring-1 fill-accent-500 dark:fill-accent-400', 10 pill: 'bg-accent-50 dark:bg-accent-500/10 text-accent-700 dark:text-accent-400 ring-1 fill-accent-500 dark:fill-accent-400 rounded-full', 11 dot: 'rounded-md bg-accent-50 dark:bg-accent-500/10 text-accent-700 dark:text-accent-400 ring-1 fill-accent-500 dark:fill-accent-400', 12 pill_dot: 13 'bg-accent-50 dark:bg-accent-500/10 text-accent-700 dark:text-accent-400 ring-1 fill-accent-500 dark:fill-accent-400 rounded-full', 14 15 flat: 'rounded-md bg-accent-100 dark:bg-accent-500/20 text-accent-700 dark:text-accent-400 ring-0 fill-accent-500 dark:fill-accent-400', 16 flat_dot: 17 'rounded-md bg-accent-100 dark:bg-accent-500/20 text-accent-700 dark:text-accent-400 ring-0 fill-accent-500 dark:fill-accent-400', 18 flat_pill: 19 'rounded-full bg-accent-100 dark:bg-accent-500/20 text-accent-700 dark:text-accent-400 ring-0 fill-accent-500 dark:fill-accent-400', 20 flat_pill_dot: 21 'rounded-full bg-accent-100 dark:bg-accent-500/20 text-accent-700 dark:text-accent-400 ring-0 fill-accent-500 dark:fill-accent-400', 22 23 green: 24 'rounded-md bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-1 ring-green-600/20 dark:ring-green-500/20', 25 red: 'rounded-md bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-red-600/20 dark:ring-red-500/20', 26 blue: 'rounded-md bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-1 ring-blue-600/20 dark:ring-blue-500/20', 27 yellow: 28 'rounded-md bg-yellow-50 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 ring-1 ring-yellow-600/20 dark:ring-yellow-500/20', 29 orange: 30 'rounded-md bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400 ring-1 ring-orange-600/20 dark:ring-orange-500/20', 31 purple: 32 'rounded-md bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 ring-1 ring-purple-600/20 dark:ring-purple-500/20', 33 pink: 'rounded-md bg-pink-50 dark:bg-pink-500/10 text-pink-700 dark:text-pink-400 ring-1 ring-pink-600/20 dark:ring-pink-500/20', 34 neutral: 35 'rounded-md bg-neutral-50 dark:bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 ring-1 ring-neutral-600/20 dark:ring-neutral-500/20', 36 37 green_pill: 38 'rounded-full bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-1 ring-green-600/20 dark:ring-green-500/20', 39 red_pill: 40 'rounded-full bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-red-600/20 dark:ring-red-500/20', 41 blue_pill: 42 'rounded-full bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-1 ring-blue-600/20 dark:ring-blue-500/20', 43 yellow_pill: 44 'rounded-full bg-yellow-50 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 ring-1 ring-yellow-600/20 dark:ring-yellow-500/20', 45 orange_pill: 46 'rounded-full bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400 ring-1 ring-orange-600/20 dark:ring-orange-500/20', 47 purple_pill: 48 'rounded-full bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 ring-1 ring-purple-600/20 dark:ring-purple-500/20', 49 pink_pill: 50 'rounded-full bg-pink-50 dark:bg-pink-500/10 text-pink-700 dark:text-pink-400 ring-1 ring-pink-600/20 dark:ring-pink-500/20', 51 neutral_pill: 52 'rounded-full bg-neutral-50 dark:bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 ring-1 ring-neutral-600/20 dark:ring-neutral-500/20', 53 54 green_pill_dot: 55 'rounded-full bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-1 ring-green-600/20 dark:ring-green-500/20 fill-green-500 dark:fill-green-400', 56 red_pill_dot: 57 'rounded-full bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-red-600/20 dark:ring-red-500/20 fill-red-500 dark:fill-red-400', 58 blue_pill_dot: 59 'rounded-full bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-1 ring-blue-600/20 dark:ring-blue-500/20 fill-blue-500 dark:fill-blue-400', 60 yellow_pill_dot: 61 'rounded-full bg-yellow-50 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 ring-1 ring-yellow-600/20 dark:ring-yellow-500/20 fill-yellow-500 dark:fill-yellow-400', 62 orange_pill_dot: 63 'rounded-full bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400 ring-1 ring-orange-600/20 dark:ring-orange-500/20 fill-orange-500 dark:fill-orange-400', 64 purple_pill_dot: 65 'rounded-full bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 ring-1 ring-purple-600/20 dark:ring-purple-500/20 fill-purple-500 dark:fill-purple-400', 66 pink_pill_dot: 67 'rounded-full bg-pink-50 dark:bg-pink-500/10 text-pink-700 dark:text-pink-400 ring-1 ring-pink-600/20 dark:ring-pink-500/20 fill-pink-500 dark:fill-pink-400', 68 neutral_pill_dot: 69 'rounded-full bg-neutral-50 dark:bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 ring-1 ring-neutral-600/20 dark:ring-neutral-500/20 fill-neutral-500 dark:fill-neutral-400', 70 71 green_dot: 72 'rounded-md bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-1 ring-green-600/20 dark:ring-green-500/20 fill-green-500 dark:fill-green-400', 73 red_dot: 74 'rounded-md bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-red-600/20 dark:ring-red-500/20 fill-red-500 dark:fill-red-400', 75 blue_dot: 76 'rounded-md bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-1 ring-blue-600/20 dark:ring-blue-500/20 fill-blue-500 dark:fill-blue-400', 77 yellow_dot: 78 'rounded-md bg-yellow-50 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 ring-1 ring-yellow-600/20 dark:ring-yellow-500/20 fill-yellow-500 dark:fill-yellow-400', 79 orange_dot: 80 'rounded-md bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400 ring-1 ring-orange-600/20 dark:ring-orange-500/20 fill-orange-500 dark:fill-orange-400', 81 purple_dot: 82 'rounded-md bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 ring-1 ring-purple-600/20 dark:ring-purple-500/20 fill-purple-500 dark:fill-purple-400', 83 pink_dot: 84 'rounded-md bg-pink-50 dark:bg-pink-500/10 text-pink-700 dark:text-pink-400 ring-1 ring-pink-600/20 dark:ring-pink-500/20 fill-pink-500 dark:fill-pink-400', 85 neutral_dot: 86 'rounded-md bg-neutral-50 dark:bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 ring-1 ring-neutral-600/20 dark:ring-neutral-500/20 fill-neutral-500 dark:fill-neutral-400', 87 88 green_flat: 89 'rounded-md bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400 ring-0 ring-green-600/20 dark:ring-green-500/20', 90 red_flat: 91 'rounded-md bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400 ring-0 ring-red-600/20 dark:ring-red-500/20', 92 blue_flat: 93 'rounded-md bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 ring-0 ring-blue-600/20 dark:ring-blue-500/20', 94 yellow_flat: 95 'rounded-md bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 ring-0 ring-yellow-600/20 dark:ring-yellow-500/20', 96 orange_flat: 97 'rounded-md bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-400 ring-0 ring-orange-600/20 dark:ring-orange-500/20', 98 purple_flat: 99 'rounded-md bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400 ring-0 ring-purple-600/20 dark:ring-purple-500/20', 100 pink_flat: 101 'rounded-md bg-pink-100 dark:bg-pink-500/20 text-pink-700 dark:text-pink-400 ring-0 ring-pink-600/20 dark:ring-pink-500/20', 102 neutral_flat: 103 'rounded-md bg-neutral-100 dark:bg-neutral-500/20 text-neutral-700 dark:text-neutral-400 ring-0 ring-neutral-600/20 dark:ring-neutral-500/20', 104 105 green_flat_pill: 106 'rounded-full bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400 ring-0 ring-green-600/20 dark:ring-green-500/20', 107 red_flat_pill: 108 'rounded-full bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400 ring-0 ring-red-600/20 dark:ring-red-500/20', 109 blue_flat_pill: 110 'rounded-full bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 ring-0 ring-blue-600/20 dark:ring-blue-500/20', 111 yellow_flat_pill: 112 'rounded-full bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 ring-0 ring-yellow-600/20 dark:ring-yellow-500/20', 113 orange_flat_pill: 114 'rounded-full bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-400 ring-0 ring-orange-600/20 dark:ring-orange-500/20', 115 purple_flat_pill: 116 'rounded-full bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400 ring-0 ring-purple-600/20 dark:ring-purple-500/20', 117 pink_flat_pill: 118 'rounded-full bg-pink-100 dark:bg-pink-500/20 text-pink-700 dark:text-pink-400 ring-0 ring-pink-600/20 dark:ring-pink-500/20', 119 neutral_flat_pill: 120 'rounded-full bg-neutral-100 dark:bg-neutral-500/20 text-neutral-700 dark:text-neutral-400 ring-0 ring-neutral-600/20 dark:ring-neutral-500/20', 121 122 green_flat_dot: 123 'rounded-md bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400 ring-0 ring-green-600/20 dark:ring-green-500/20 fill-green-500 dark:fill-green-400', 124 red_flat_dot: 125 'rounded-md bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400 ring-0 ring-red-600/20 dark:ring-red-500/20 fill-red-500 dark:fill-red-400', 126 blue_flat_dot: 127 'rounded-md bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 ring-0 ring-blue-600/20 dark:ring-blue-500/20 fill-blue-500 dark:fill-blue-400', 128 yellow_flat_dot: 129 'rounded-md bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 ring-0 ring-yellow-600/20 dark:ring-yellow-500/20 fill-yellow-500 dark:fill-yellow-400', 130 orange_flat_dot: 131 'rounded-md bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-400 ring-0 ring-orange-600/20 dark:ring-orange-500/20 fill-orange-500 dark:fill-orange-400', 132 purple_flat_dot: 133 'rounded-md bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400 ring-0 ring-purple-600/20 dark:ring-purple-500/20 fill-purple-500 dark:fill-purple-400', 134 pink_flat_dot: 135 'rounded-md bg-pink-100 dark:bg-pink-500/20 text-pink-700 dark:text-pink-400 ring-0 ring-pink-600/20 dark:ring-pink-500/20 fill-pink-500 dark:fill-pink-400', 136 neutral_flat_dot: 137 'rounded-md bg-neutral-100 dark:bg-neutral-500/20 text-neutral-700 dark:text-neutral-400 ring-0 ring-neutral-600/20 dark:ring-neutral-500/20 fill-neutral-500 dark:fill-neutral-400', 138 139 green_flat_pill_dot: 140 'rounded-full bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400 ring-0 ring-green-600/20 dark:ring-green-500/20 fill-green-500 dark:fill-green-400', 141 red_flat_pill_dot: 142 'rounded-full bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400 ring-0 ring-red-600/20 dark:ring-red-500/20 fill-red-500 dark:fill-red-400', 143 blue_flat_pill_dot: 144 'rounded-full bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 ring-0 ring-blue-600/20 dark:ring-blue-500/20 fill-blue-500 dark:fill-blue-400', 145 yellow_flat_pill_dot: 146 'rounded-full bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 ring-0 ring-yellow-600/20 dark:ring-yellow-500/20 fill-yellow-500 dark:fill-yellow-400', 147 orange_flat_pill_dot: 148 'rounded-full bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-400 ring-0 ring-orange-600/20 dark:ring-orange-500/20 fill-orange-500 dark:fill-orange-400', 149 purple_flat_pill_dot: 150 'rounded-full bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400 ring-0 ring-purple-600/20 dark:ring-purple-500/20 fill-purple-500 dark:fill-purple-400', 151 pink_flat_pill_dot: 152 'rounded-full bg-pink-100 dark:bg-pink-500/20 text-pink-700 dark:text-pink-400 ring-0 ring-pink-600/20 dark:ring-pink-500/20 fill-pink-500 dark:fill-pink-400', 153 neutral_flat_pill_dot: 154 'rounded-full bg-neutral-100 dark:bg-neutral-500/20 text-neutral-700 dark:text-neutral-400 ring-0 ring-neutral-600/20 dark:ring-neutral-500/20 fill-neutral-500 dark:fill-neutral-400' 155 }, 156 size: { 157 default: 'text-xs px-2 py-1 font-medium', 158 lg: 'text-base px-4 py-1.5' 159 } 160 }, 161 defaultVariants: { 162 variant: 'default', 163 size: 'default' 164 } 165}); 166 167export type Variant = VariantProps<typeof badgeVariants>['variant']; 168export type Size = VariantProps<typeof badgeVariants>['size'];