From 7992ccaaeba16d086a92be0cd6d49aa9dd844ac0 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Fri, 5 Jul 2024 11:38:11 +0300 Subject: [PATCH] feat(plasma-web/b2c,sdds-serv): update Textfield configs --- .../components/TextField/TextField.config.ts | 42 +++++-------------- .../components/TextField/TextField.config.ts | 39 +++++------------ .../components/TextField/TextField.config.ts | 42 +++++-------------- 3 files changed, 33 insertions(+), 90 deletions(-) diff --git a/packages/plasma-b2c/src/components/TextField/TextField.config.ts b/packages/plasma-b2c/src/components/TextField/TextField.config.ts index d43c4ceeda..6b99cad9b0 100644 --- a/packages/plasma-b2c/src/components/TextField/TextField.config.ts +++ b/packages/plasma-b2c/src/components/TextField/TextField.config.ts @@ -1,9 +1,4 @@ -import { - css, - textFieldTokens as tokens, - textField_labelPlacement_inner as labelPlacement_inner, - textField_labelPlacement_outer as labelPlacement_outer, -} from '@salutejs/plasma-new-hope/styled-components'; +import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { defaults: { @@ -40,7 +35,6 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, - // TODO заменить --surface-transparent-positive на корректный токен positive: css` ${tokens.color}: var(--plasma-colors-primary); ${tokens.backgroundColor}: var(--surface-transparent-positive); @@ -68,7 +62,6 @@ export const config = { ${tokens.textBeforeColor}: var(--text-tertiary); ${tokens.textAfterColor}: var(--text-tertiary); `, - // // TODO заменить --surface-transparent-warning на корректный токен warning: css` ${tokens.color}: var(--plasma-colors-primary); ${tokens.backgroundColor}: var(--surface-transparent-warning); @@ -96,7 +89,6 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, - // // TODO заменить --surface-transparent-negative на корректный токен negative: css` ${tokens.color}: var(--plasma-colors-primary); ${tokens.backgroundColor}: var(--surface-transparent-negative); @@ -340,34 +332,22 @@ export const config = { `, }, labelPlacement: { - inner: [ - labelPlacement_inner, - css` - &.${labelPlacement_inner} { - ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - } - `, - ], - outer: [ - labelPlacement_outer, - css` - &.${labelPlacement_outer} { - } - `, - ], + inner: css` + ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + outer: css``, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; `, }, - // TODO заменить --surface-transparent-primary на корректный токен readOnly: { true: css` ${tokens.colorReadOnly}: var(--text-secondary); diff --git a/packages/plasma-web/src/components/TextField/TextField.config.ts b/packages/plasma-web/src/components/TextField/TextField.config.ts index 47c0d434ac..24f8470201 100644 --- a/packages/plasma-web/src/components/TextField/TextField.config.ts +++ b/packages/plasma-web/src/components/TextField/TextField.config.ts @@ -1,9 +1,4 @@ -import { - css, - textFieldTokens as tokens, - textField_labelPlacement_inner as labelPlacement_inner, - textField_labelPlacement_outer as labelPlacement_outer, -} from '@salutejs/plasma-new-hope/styled-components'; +import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { defaults: { @@ -353,34 +348,22 @@ export const config = { `, }, labelPlacement: { - inner: [ - labelPlacement_inner, - css` - &.${labelPlacement_inner} { - ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - } - `, - ], - outer: [ - labelPlacement_outer, - css` - &.${labelPlacement_outer} { - } - `, - ], + inner: css` + ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + outer: css``, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; `, }, - // TODO заменить --surface-transparent-primary на корректный токен readOnly: { true: css` ${tokens.colorReadOnly}: var(--text-primary); diff --git a/packages/sdds-serv/src/components/TextField/TextField.config.ts b/packages/sdds-serv/src/components/TextField/TextField.config.ts index cf33c6e939..2a175c42a9 100644 --- a/packages/sdds-serv/src/components/TextField/TextField.config.ts +++ b/packages/sdds-serv/src/components/TextField/TextField.config.ts @@ -1,9 +1,4 @@ -import { - css, - textFieldTokens as tokens, - textField_labelPlacement_inner as labelPlacement_inner, - textField_labelPlacement_outer as labelPlacement_outer, -} from '@salutejs/plasma-new-hope/styled-components'; +import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { defaults: { @@ -40,7 +35,6 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, - // TODO заменить --surface-transparent-positive на корректный токен positive: css` ${tokens.color}: var(--plasma-colors-primary); ${tokens.backgroundColor}: var(--surface-transparent-positive); @@ -68,7 +62,6 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, - // // TODO заменить --surface-transparent-warning на корректный токен warning: css` ${tokens.color}: var(--plasma-colors-primary); ${tokens.backgroundColor}: var(--surface-transparent-warning); @@ -96,7 +89,6 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, - // // TODO заменить --surface-transparent-negative на корректный токен negative: css` ${tokens.color}: var(--plasma-colors-primary); ${tokens.backgroundColor}: var(--surface-transparent-negative); @@ -340,34 +332,22 @@ export const config = { `, }, labelPlacement: { - inner: [ - labelPlacement_inner, - css` - &.${labelPlacement_inner} { - ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - } - `, - ], - outer: [ - labelPlacement_outer, - css` - &.${labelPlacement_outer} { - } - `, - ], + inner: css` + ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + outer: css``, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; `, }, - // TODO заменить --surface-transparent-primary на корректный токен readOnly: { true: css` ${tokens.colorReadOnly}: var(--text-secondary);