Skip to content

Commit eb9cd82

Browse files
iljsiljs
committed
fix(finai): edit textfield tokens
1 parent 4e89d71 commit eb9cd82

File tree

2 files changed

+31
-10
lines changed

2 files changed

+31
-10
lines changed

‎packages/plasma-new-hope/src/components/TextField/TextField.tokens.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ export const tokens = {
218218
indicatorLabelPlacementInnerRight: '--plasma-textfield__indicator-placement-inner-right',
219219
indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right',
220220
indicatorLabelPlacementHintOuterRight: '--plasma-textfield__indicator-hint-placement-outer-right',
221+
221222
clearIndicatorLabelPlacementInner: '--plasma-textfield__clear-indicator-placement-inner',
222223
clearIndicatorLabelPlacementInnerRight: '--plasma-textfield__clear-indicator-placement-inner-right',
223224
clearIndicatorHintInnerRight: '--plasma-textfield__clear-indicator-hint-placement-inner-right',

‎packages/sdds-finai/src/components/TextField/TextField.config.ts‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,12 @@ export const config = {
1414
${tokens.placeholderColor}: var(--text-secondary);
1515
${tokens.placeholderColorFocus}: var(--text-tertiary);
1616
17-
${tokens.backgroundColor}: var(--surface-transparent-primary);
18-
${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover);
19-
${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
17+
${tokens.backgroundColor}: var(--surface-transparent-card);
18+
${tokens.backgroundColorHover}: var(--surface-transparent-card-hover);
19+
${tokens.backgroundColorFocus}: var(--surface-transparent-card);
20+
${tokens.borderColor}: var(--outline-solid-primary);
21+
${tokens.borderColorHover}: var(--outline-solid-primary-hover);
22+
${tokens.borderColorFocus}: var(--outline-accent);
2023
${tokens.caretColor}: var(--text-accent);
2124
${tokens.textBeforeColor}: var(--text-tertiary);
2225
${tokens.textAfterColor}: var(--text-tertiary);
@@ -46,6 +49,9 @@ export const config = {
4649
${tokens.backgroundColor}: var(--surface-transparent-positive);
4750
${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover);
4851
${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active);
52+
${tokens.borderColor}: var(--outline-transparent-positive);
53+
${tokens.borderColorHover}: var(--outline-transparent-positive-hover);
54+
${tokens.borderColorFocus}: var(--outline-transparent-positive-active);
4955
${tokens.caretColor}: var(--text-accent);
5056
${tokens.textBeforeColor}: var(--text-tertiary);
5157
${tokens.textAfterColor}: var(--text-tertiary);
@@ -75,6 +81,9 @@ export const config = {
7581
${tokens.backgroundColor}: var(--surface-transparent-warning);
7682
${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover);
7783
${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active);
84+
${tokens.borderColor}: var(--outline-transparent-warning);
85+
${tokens.borderColorHover}: var(--outline-transparent-warning-hover);
86+
${tokens.borderColorFocus}: var(--outline-transparent-warning-active);
7887
${tokens.caretColor}: var(--text-accent);
7988
${tokens.textBeforeColor}: var(--text-tertiary);
8089
${tokens.textAfterColor}: var(--text-tertiary);
@@ -104,6 +113,9 @@ export const config = {
104113
${tokens.backgroundColor}: var(--surface-transparent-negative);
105114
${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover);
106115
${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active);
116+
${tokens.borderColor}: var(--outline-transparent-negative);
117+
${tokens.borderColorHover}: var(--outline-transparent-negative-hover);
118+
${tokens.borderColorFocus}: var(--outline-transparent-negative-active);
107119
${tokens.caretColor}: var(--text-accent);
108120
${tokens.textBeforeColor}: var(--text-tertiary);
109121
${tokens.textAfterColor}: var(--text-tertiary);
@@ -131,6 +143,7 @@ export const config = {
131143
${tokens.padding}: 1.3125rem 1.125rem;
132144
${tokens.paddingWithChips}: 0.375rem;
133145
${tokens.borderRadius}: 1rem;
146+
${tokens.borderWidth}: 0.125rem;
134147
135148
${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem;
136149
${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem;
@@ -210,7 +223,7 @@ export const config = {
210223
${tokens.padding}: 1.0625rem 1.125rem 1.0625rem 1.125rem;
211224
${tokens.paddingWithChips}: 0.375rem;
212225
${tokens.borderRadius}: 0.875rem;
213-
${tokens.borderWidth}: 0.0625rem;
226+
${tokens.borderWidth}: 0.125rem;
214227
215228
${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem;
216229
${tokens.rightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;
@@ -288,7 +301,7 @@ export const config = {
288301
${tokens.padding}: 0.875rem 1rem 0.875rem 1rem;
289302
${tokens.paddingWithChips}: 0.375rem;
290303
${tokens.borderRadius}: 0.75rem;
291-
${tokens.borderWidth}: 0.0625rem;
304+
${tokens.borderWidth}: 0.125rem;
292305
293306
${tokens.leftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
294307
${tokens.rightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
@@ -366,7 +379,7 @@ export const config = {
366379
${tokens.padding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
367380
${tokens.paddingWithChips}: 0.375rem;
368381
${tokens.borderRadius}: 0.625rem;
369-
${tokens.borderWidth}: 0.0625rem;
382+
${tokens.borderWidth}: 0.125rem;
370383
371384
${tokens.leftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
372385
${tokens.rightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
@@ -444,7 +457,7 @@ export const config = {
444457
${tokens.padding}: 0.5625rem 0.625rem 0.5625rem 0.625rem;
445458
${tokens.paddingWithChips}: 0.375rem;
446459
${tokens.borderRadius}: 0.5rem;
447-
${tokens.borderWidth}: 0.0625rem;
460+
${tokens.borderWidth}: 0.125rem;
448461
449462
${tokens.leftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem;
450463
${tokens.rightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;
@@ -694,20 +707,27 @@ export const config = {
694707
},
695708
disabled: {
696709
true: css`
697-
${tokens.disabledOpacity}: 0.4;
710+
${tokens.disabledOpacity}: 1;
711+
${tokens.backgroundColor}: var(--surface-transparent-secondary);
712+
${tokens.contentSlotRightColor}: var(--text-secondary);
713+
${tokens.contentSlotRightColorHover}: var(--text-secondary);
714+
${tokens.contentSlotRightColorActive}: var(--text-secondary);
698715
`,
699716
},
700717
readOnly: {
701718
true: css`
702719
${tokens.readOnlyOpacity}: 0.1;
703720
${tokens.colorReadOnly}: var(--text-primary);
704-
${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary);
721+
${tokens.backgroundColorReadOnly}: var(--surface-transparent-card);
722+
${tokens.borderColorReadOnly}: var(--outline-solid-primary);
705723
${tokens.placeholderColorReadOnly}: var(--text-secondary);
706724
${tokens.leftHelperColorReadOnly}: var(--text-secondary);
707725
${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
708726
${tokens.labelColorReadOnly}: var(--text-primary);
709727
${tokens.dividerColorReadOnly}: var(--surface-transparent-primary);
710-
${tokens.contentSlotRightOpacityReadOnly}: 0.4;
728+
${tokens.contentSlotRightColor}: var(--text-secondary);
729+
${tokens.contentSlotRightColorHover}: var(--text-secondary);
730+
${tokens.contentSlotRightColorActive}: var(--text-secondary);
711731
`,
712732
},
713733
},

0 commit comments

Comments
 (0)