lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix input styles

Browse Source
This commit is contained in:
tom
2025-02-18 20:05:49 +01:00
parent 14a7622448
commit d771c47bb6
5 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toolkit/chakra/field.tsx
+2
View File
@@ -27,6 +27,8 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
size: props.size,
floating: props.floating,
bgColor: rest.bgColor,
disabled: rest.disabled,
readOnly: rest.readOnly,
};
const labelElement = (
toolkit/theme/foundations/semanticTokens.ts
+1
View File
@@ -232,6 +232,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
error: { value: '{colors.red.500}' },
},
placeholder: { value: '{colors.gray.500}' },
},
field: {
placeholder: {
toolkit/theme/recipes/field.recipe.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export const recipe = defineSlotRecipe({
bg: 'bg',
top: '2px',
left: '2px',
color: 'gray.500',
color: 'input.placeholder',
width: 'calc(100% - 4px)',
borderRadius: 'base',
pointerEvents: 'none',
toolkit/theme/recipes/input.recipe.ts
+7 -1
View File
@@ -52,8 +52,14 @@ export const recipe = defineRecipe({
outline: {
bg: 'input.bg',
borderWidth: '2px',
borderColor: 'input.border',
borderColor: 'input.border.filled',
focusVisibleRing: 'none',
_placeholder: {
color: 'input.placeholder',
},
_placeholderShown: {
borderColor: 'input.border',
},
_hover: {
borderColor: 'input.border.hover',
},
ui/showcases/Input.tsx
+13 -13
View File
@@ -66,11 +66,11 @@ const InputShowcase = () => {
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required floating size="xl" maxWidth="300px">
<Input size="xl" disabled value="[email protected]"/>
<Field label="Email (disabled)" required floating disabled size="xl" maxWidth="300px">
<Input size="xl" value="[email protected]"/>
</Field>
<Field label="Email (readOnly)" required floating size="xl" maxWidth="300px">
<Input size="xl" readOnly value="[email protected]"/>
<Field label="Email (readOnly)" required floating readOnly size="xl" maxWidth="300px">
<Input size="xl" value="[email protected]"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
@@ -84,25 +84,25 @@ const InputShowcase = () => {
<Field label="Email" required helperText="Helper text" maxWidth="200px">
<Input/>
</Field>
<Field label="Email (disabled)" required maxWidth="200px">
<Input disabled value="[email protected]"/>
<Field label="Email (disabled)" required disabled maxWidth="200px">
<Input value="[email protected]"/>
</Field>
<Field label="Email (readOnly)" required maxWidth="200px">
<Input readOnly value="[email protected]"/>
<Field label="Email (readOnly)" required readOnly maxWidth="200px">
<Input value="[email protected]"/>
</Field>
<Field label="Email (invalid)" required errorText="Something went wrong" invalid maxWidth="200px">
<Input size="xl" value="duck"/>
<Input value="duck"/>
</Field>
</Sample>
<Sample label="floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required floating size="xl" maxWidth="300px">
<Input size="xl" disabled value="[email protected]"/>
<Field label="Email (disabled)" required disabled floating size="xl" maxWidth="300px">
<Input size="xl" value="[email protected]"/>
</Field>
<Field label="Email (readOnly)" required floating size="xl" maxWidth="300px">
<Input size="xl" readOnly value="[email protected]"/>
<Field label="Email (readOnly)" required readOnly floating size="xl" maxWidth="300px">
<Input size="xl" value="[email protected]"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>