a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
update field description, text input, and textarea components
+7
-6
+1
-2
app/src/lib/ui/form/field/field-description.svelte
+1
-2
app/src/lib/ui/form/field/field-description.svelte
···
17
17
18
18
const fieldDescription = tv({
19
19
base: [
20
-
'text-field-description-foreground text-sm leading-normal font-normal',
21
-
'group-has-data-[orientation=horizontal]/field:text-balance',
20
+
'text-field-description-foreground text-sm leading-normal font-normal text-pretty',
22
21
'last:mt-0 nth-last-2:-mt-1',
23
22
'[[data-variant=legend]+&]:-mt-1.5',
24
23
'[&>a:hover]:text-primary',
+4
-3
app/src/lib/ui/form/text-input/text-input.svelte
+4
-3
app/src/lib/ui/form/text-input/text-input.svelte
···
2
2
import type { WithElementRef } from 'bits-ui'
3
3
import type { Snippet } from 'svelte'
4
4
import type { SvelteHTMLElements } from 'svelte/elements'
5
-
import { tv } from 'tailwind-variants'
5
+
import { cn, tv } from 'tailwind-variants'
6
6
7
7
type TextInputRootElement = SvelteHTMLElements['input']
8
8
type TextInputProps = WithElementRef<TextInputRootElement> & {
···
19
19
before,
20
20
after,
21
21
maxlength,
22
+
class: className,
22
23
ref = $bindable(null),
23
24
value = $bindable(''),
24
25
...restProps
···
42
43
inputElement: [
43
44
'appearance-none',
44
45
'w-full',
45
-
'focus:outline-none',
46
+
'focus-visible:outline-0',
46
47
'placeholder:text-textinput-placeholder',
47
48
],
48
49
},
···
50
51
const { inputParent, inputElement } = field()
51
52
</script>
52
53
53
-
<div class={inputParent()}>
54
+
<div class={cn(inputParent(), className)}>
54
55
{@render before?.()}
55
56
<input
56
57
bind:this={ref}
+1
app/src/lib/ui/form/text-input/textarea-input.svelte
+1
app/src/lib/ui/form/text-input/textarea-input.svelte
+1
-1
app/src/styles/color.css
+1
-1
app/src/styles/color.css
···
94
94
/* ui(form): text input */
95
95
--textinput: light-dark(var(--color-white), var(--color-hsr-dark));
96
96
--textinput-border: light-dark(var(--palette-gray-300), var(--palette-gray-800));
97
-
--textinput-placeholder: var(--palette-gray-600);
97
+
--textinput-placeholder: var(--palette-gray-400);
98
98
99
99
/* ui(form): password input */
100
100
--passwordinput-button: var(--palette-gray-100);