Skip to content

Commit e04a56f

Browse files
wonderlulwonderlul
committed
fix: md3 colors and opacity
1 parent 89c0638 commit e04a56f

7 files changed

Lines changed: 528 additions & 48 deletions

File tree

‎src/components/TextField/TextField_specs.md‎

Lines changed: 404 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/TextField/filled/logic.ts‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,34 @@ import {
1010
ACTIVE_INDICATOR_SIZE,
1111
INACTIVE_INDICATOR_SIZE,
1212
INPUT_FONT_SIZE,
13-
MULTILINE_PADDING_TOP,
1413
isWeb,
14+
MULTILINE_PADDING_TOP,
1515
} from '../constants';
16+
import {
17+
$disabledStyle,
18+
$helperStyle,
19+
$inputStyle,
20+
$leadingAccessoryStyle,
21+
$trailingAccessoryStyle,
22+
} from '../styles';
1623
import type { TextFieldProps, TextFieldSharedApi } from '../TextField';
17-
import { getLabelColor } from '../utils';
24+
import {
25+
getFieldBackgroundColor,
26+
getHelperColor,
27+
getLabelColor,
28+
} from '../utils';
1829
import {
1930
LABEL_LEFT_OFFSET_WITH_ACCESSORY,
2031
LABEL_LEFT_OFFSET_WITHOUT_ACCESSORY,
2132
} from './constants';
2233
import {
23-
$fieldStyle,
2434
$containerStyle,
25-
$labelWrapperStyle,
35+
$fieldStyle,
2636
$labelTextStyle,
37+
$labelWrapperStyle,
2738
$outlineStyle,
2839
} from './styles';
2940
import { getOutlineColor } from './utils';
30-
import {
31-
$disabledStyle,
32-
$helperStyle,
33-
$inputStyle,
34-
$leadingAccessoryStyle,
35-
$trailingAccessoryStyle,
36-
} from '../styles';
3741

3842
export const getFilledTextFieldData = (
3943
api: TextFieldSharedApi,
@@ -70,27 +74,27 @@ export const getFilledTextFieldData = (
7074
// =======================
7175

7276
const {
73-
colors: {
74-
error: errorColor,
75-
onSurface,
76-
onSurfaceVariant,
77-
surfaceVariant,
78-
surfaceContainerHighest,
79-
},
77+
colors: { onSurface },
8078
} = theme;
8179

8280
const labelColor = getLabelColor({
8381
theme,
8482
status: props.status,
8583
isFocused,
84+
disabled,
8685
});
8786

8887
const outlineColor = getOutlineColor({
8988
theme,
9089
status: props.status,
9190
isFocused,
91+
disabled,
9292
});
9393

94+
const fieldBackgroundColor = getFieldBackgroundColor({ theme, disabled });
95+
96+
const helperColor = getHelperColor({ theme, status: props.status, disabled });
97+
9498
// =======================
9599
// STYLES
96100
// =======================
@@ -115,15 +119,15 @@ export const getFilledTextFieldData = (
115119
color: labelColor,
116120
},
117121
$animatedLabelTextStyle,
122+
disabled && $disabledStyle,
118123
labelProps?.style,
119124
];
120125

121126
const $fieldStyles = [
122127
$fieldStyle,
123128
{
124-
backgroundColor: disabled ? surfaceContainerHighest : surfaceVariant,
129+
backgroundColor: fieldBackgroundColor,
125130
},
126-
disabled && $disabledStyle,
127131
$fieldStyleOverride,
128132
];
129133

@@ -140,7 +144,7 @@ export const getFilledTextFieldData = (
140144
const $helperStyles: StyleProp<TextStyle> = [
141145
$helperStyle,
142146
{
143-
color: hasError ? errorColor : onSurfaceVariant,
147+
color: helperColor,
144148
writingDirection: isRTL ? 'rtl' : 'ltr',
145149
},
146150
disabled && $disabledStyle,
@@ -162,9 +166,20 @@ export const getFilledTextFieldData = (
162166
isWeb && {
163167
outlineStyle: 'none' as TextStyle['outlineStyle'],
164168
},
169+
disabled && $disabledStyle,
165170
$inputStyleOverride,
166171
];
167172

173+
const $leadingAccessoryStyles = [
174+
$leadingAccessoryStyle,
175+
disabled && $disabledStyle,
176+
];
177+
178+
const $trailingAccessoryStyles = [
179+
$trailingAccessoryStyle,
180+
disabled && $disabledStyle,
181+
];
182+
168183
return {
169184
input,
170185
disabled,
@@ -176,7 +191,7 @@ export const getFilledTextFieldData = (
176191
$containerStyles,
177192
$helperStyles,
178193
$inputStyles,
179-
$leadingAccessoryStyles: $leadingAccessoryStyle,
180-
$trailingAccessoryStyles: $trailingAccessoryStyle,
194+
$leadingAccessoryStyles,
195+
$trailingAccessoryStyles,
181196
};
182197
};

‎src/components/TextField/filled/utils.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
1+
import color from 'color';
2+
3+
import { tokens } from '../../../styles/themes/v3/tokens';
14
import type { InternalTheme } from '../../../types';
25

36
export const getOutlineColor = ({
47
theme,
58
status,
69
isFocused,
10+
disabled,
711
}: {
812
theme: InternalTheme;
913
isFocused: boolean;
1014
status?: 'error' | 'disabled';
15+
disabled: boolean;
1116
}) => {
1217
const {
13-
colors: { error, primary, outline, outlineVariant },
18+
colors: { error, onSurface, primary, outline },
1419
} = theme;
1520

21+
if (disabled) {
22+
return color(onSurface)
23+
.alpha(tokens.md.ref.stateOpacity.disabled)
24+
.rgb()
25+
.string();
26+
}
1627
if (status === 'error') {
1728
return error;
1829
}
19-
if (status === 'disabled') {
20-
return outlineVariant;
21-
}
2230
if (isFocused) {
2331
return primary;
2432
}

‎src/components/TextField/outlined/logic.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88

99
import { INPUT_FONT_SIZE, isWeb } from '../constants';
1010
import type { TextFieldProps, TextFieldSharedApi } from '../TextField';
11-
import { getLabelColor } from '../utils';
11+
import { getHelperColor, getLabelColor } from '../utils';
1212
import {
1313
LABEL_LEFT_OFFSET_WITH_ACCESSORY,
1414
LABEL_LEFT_OFFSET_WITHOUT_ACCESSORY,
@@ -66,18 +66,14 @@ export const getOutlinedTextFieldData = (
6666
// =======================
6767

6868
const {
69-
colors: {
70-
background: labelBackgroundColor,
71-
error: errorColor,
72-
onSurface,
73-
onSurfaceVariant,
74-
},
69+
colors: { background: labelBackgroundColor, onSurface },
7570
} = theme;
7671

7772
const labelColor = getLabelColor({
7873
theme,
7974
status: props.status,
8075
isFocused,
76+
disabled,
8177
});
8278

8379
const { inactiveOutlineColor, activeOutlineColor } = getOutlinedFieldColors({
@@ -86,6 +82,8 @@ export const getOutlinedTextFieldData = (
8682
hasError,
8783
});
8884

85+
const helperColor = getHelperColor({ theme, status: props.status, disabled });
86+
8987
// =======================
9088
// STYLES
9189
// =======================
@@ -98,7 +96,6 @@ export const getOutlinedTextFieldData = (
9896
borderWidth: hasActiveOutline ? 2 : 1,
9997
borderColor: hasActiveOutline ? activeOutlineColor : inactiveOutlineColor,
10098
},
101-
disabled && $disabledStyle,
10299
$fieldStyleOverride,
103100
];
104101

@@ -107,7 +104,7 @@ export const getOutlinedTextFieldData = (
107104
const $helperStyles: StyleProp<TextStyle> = [
108105
$helperStyle,
109106
{
110-
color: hasError ? errorColor : onSurfaceVariant,
107+
color: helperColor,
111108
writingDirection: isRTL ? 'rtl' : 'ltr',
112109
},
113110
disabled && $disabledStyle,

‎src/components/TextField/outlined/utils.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import color from 'color';
2+
3+
import { tokens } from '../../../styles/themes/v3/tokens';
14
import type { InternalTheme } from '../../../types';
25

36
export const getOutlinedFieldColors = ({
@@ -9,18 +12,23 @@ export const getOutlinedFieldColors = ({
912
disabled: boolean;
1013
hasError: boolean;
1114
}) => {
12-
const { colors } = theme;
15+
const {
16+
colors: { outline, onSurface, primary, error },
17+
} = theme;
1318

14-
let inactiveOutlineColor = colors.outline;
19+
let inactiveOutlineColor = outline;
1520

1621
if (disabled) {
17-
inactiveOutlineColor = theme.dark ? 'transparent' : colors.outlineVariant;
22+
inactiveOutlineColor = color(onSurface)
23+
.alpha(tokens.md.ref.stateOpacity.dragged)
24+
.rgb()
25+
.string();
1826
}
1927

20-
let activeOutlineColor = colors.primary;
28+
let activeOutlineColor = primary;
2129

2230
if (hasError) {
23-
activeOutlineColor = colors.error;
31+
activeOutlineColor = error;
2432
}
2533

2634
return {

‎src/components/TextField/utils.ts‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import color from 'color';
2+
3+
import { tokens } from '../../styles/themes/v3/tokens';
14
import type { InternalTheme } from '../../types';
25

36
export const getAccentColors = ({
@@ -19,23 +22,69 @@ export const getLabelColor = ({
1922
theme,
2023
status,
2124
isFocused,
25+
disabled,
2226
}: {
2327
theme: InternalTheme;
2428
isFocused: boolean;
2529
status?: 'error' | 'disabled';
30+
disabled: boolean;
2631
}) => {
2732
const {
28-
colors: { error, primary, onSurfaceVariant },
33+
colors: { error, primary, onSurface, onSurfaceVariant },
2934
} = theme;
3035

36+
if (disabled) {
37+
return onSurface;
38+
}
39+
3140
if (status === 'error') {
3241
return error;
3342
}
34-
if (status === 'disabled') {
35-
return onSurfaceVariant;
36-
}
3743
if (isFocused) {
3844
return primary;
3945
}
4046
return onSurfaceVariant;
4147
};
48+
49+
export const getHelperColor = ({
50+
theme,
51+
status,
52+
disabled,
53+
}: {
54+
theme: InternalTheme;
55+
status?: 'error' | 'disabled';
56+
disabled: boolean;
57+
}) => {
58+
const {
59+
colors: { error, onSurface, onSurfaceVariant },
60+
} = theme;
61+
62+
if (disabled) {
63+
return onSurface;
64+
}
65+
66+
if (status === 'error') {
67+
return error;
68+
}
69+
return onSurfaceVariant;
70+
};
71+
72+
export const getFieldBackgroundColor = ({
73+
theme,
74+
disabled,
75+
}: {
76+
theme: InternalTheme;
77+
disabled: boolean;
78+
}) => {
79+
const {
80+
colors: { onSurface, surfaceContainerHighest },
81+
} = theme;
82+
if (disabled) {
83+
return color(onSurface)
84+
.alpha(tokens.md.ref.stateOpacity.hover)
85+
.rgb()
86+
.string();
87+
}
88+
89+
return surfaceContainerHighest;
90+
};

‎src/components/__tests__/__snapshots__/TextField.test.tsx.snap‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,8 @@ exports[`renders filled TextField with label and value 1`] = `
5050
"paddingVertical": 8,
5151
},
5252
{
53-
"backgroundColor": "rgba(231, 224, 236, 1)",
53+
"backgroundColor": "rgba(230, 224, 233, 1)",
5454
},
55-
false,
5655
undefined,
5756
]
5857
}
@@ -141,6 +140,7 @@ exports[`renders filled TextField with label and value 1`] = `
141140
},
142141
undefined,
143142
false,
143+
false,
144144
undefined,
145145
]
146146
}
@@ -219,7 +219,6 @@ exports[`renders outlined TextField with label and value 1`] = `
219219
"borderColor": "rgba(121, 116, 126, 1)",
220220
"borderWidth": 1,
221221
},
222-
false,
223222
undefined,
224223
]
225224
}

0 commit comments

Comments
 (0)