From dc549f0f8a075de0afe3f39e4da38af37f43383a Mon Sep 17 00:00:00 2001 From: Julius Walther Date: Thu, 18 Apr 2024 12:59:34 +0200 Subject: [PATCH] fix(ui-library, tokens): #1014 create & use tokens for inputfield icon (#1036) Co-authored-by: larserbach --- .../input/tokens/$themes.json | 58 +++---- .../input/tokens/cmp/color.json | 32 +--- .../input/tokens/cmp/sizeVariants.json | 2 +- .../input/tokens/cmp/sizes.json | 22 +-- .../input/tokens/sem/colors.json | 148 ++++++++++++------ .../input/tokens/sem/sizes.json | 16 ++ .../input/tokens/sys/dark.json | 2 +- .../input/tokens/sys/light.json | 12 +- .../components/input-field-text/index.css.ts | 107 +++++++++---- .../src/components/input-field-text/index.ts | 119 +++++++------- .../src/components/select/index.css.ts | 93 ++++++++--- .../src/components/select/index.stories.ts | 2 +- .../ui-library/src/components/select/index.ts | 102 ++++++------ .../foundation/semantic-tokens/form.css.ts | 36 +---- 14 files changed, 406 insertions(+), 345 deletions(-) diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json index fef0454b7..c4d24c389 100644 --- a/packages/figma-design-tokens/input/tokens/$themes.json +++ b/packages/figma-design-tokens/input/tokens/$themes.json @@ -100,12 +100,6 @@ "cmp.FormLabel.InlineLabel.TextColor.Disabled": "ac1cc8ed9643ad5f4fa5f3b3693f368f54655ad5", "cmp.FormLabel.InlineLabel.TextColor.ReadOnly": "b4207ce3c099c1c83ce689eb7f9aec01de450a2f", "cmp.FormLabel.InlineLabel.TextColor.Error": "60b48d324ed0d86477b76f77e6897f53ec8e90b5", - "cmp.InputIcon.Icon.IconColor.Rest": "554bd76719ec9737468b45034980ddd754010520", - "cmp.InputIcon.Icon.IconColor.Hover": "9456f68662546eb82fa8a1afba4689350b0ae1c9", - "cmp.InputIcon.Icon.IconColor.Pressed": "2814a5b557a744bf28718cf207e509701402d3be", - "cmp.InputIcon.Icon.IconColor.Focus": "deb559cd6eb4283b0a13f740bead59d96daabeda", - "cmp.InputIcon.Icon.IconColor.Disabled": "86b7ee9b1fc915a3f9a015c960ba4019b0b80961", - "cmp.InputIcon.Icon.IconColor.Error": "a07d2514e4fdb3aebbdd05c6ac20448d83d979e1", "cmp.Loader.Background.BorderColor.Default": "1665cad16463a4c2464c028aadf12d62ae031e8a", "cmp.Loader.Background.BorderColor.Inverted": "e3e7db96b17a0af68f18fc5bf9e330fc7d4c9240", "cmp.Loader.Foreground.BorderColor.Default": "8f18f3faf266613992f58a37fc45562edc33b9e8", @@ -533,26 +527,6 @@ "sem.forms.fieldset.legend.textcolor.disabled": "63fd4422efc4f9d425a1975382c6ff1a316e529f", "sem.forms.fieldset.legend.textcolor.readonly": "b5d9e11121c3e6243643df35c2cad939609e30ff", "sem.forms.fieldset.legend.textcolor.error": "de8204419ce941eb30742e83ed535d7cb29bd6d3", - "sem.forms.inputfield.userinput.textcolor.default.rest": "336b21df9cf800f043d490b54cce32da43d04b5c", - "sem.forms.inputfield.userinput.textcolor.default.hover": "726e8369d2af8229da8c97adee71e391e24aefd7", - "sem.forms.inputfield.userinput.textcolor.default.pressed": "48b9d34f3448af2ec340983bcf2c9aca081f9322", - "sem.forms.inputfield.userinput.textcolor.default.focus": "dd874c42b27a6358a7b323cb9f676d5b8fcc6967", - "sem.forms.inputfield.userinput.textcolor.default.disabled": "efbe6242fd9b17d145ad88ede3103457b5358aa6", - "sem.forms.inputfield.userinput.textcolor.default.readonly": "fb53339d9a1d16a4bb6b2ce7783d4546f4f4ab0d", - "sem.forms.inputfield.userinput.textcolor.error.rest": "378d2d42b98d02f44b896da0f3c57e626e036eca", - "sem.forms.inputfield.userinput.textcolor.error.hover": "6a2099f728bb05439127cb7c8b918ca206f179e3", - "sem.forms.inputfield.userinput.textcolor.error.pressed": "29483da954c99f6a8e46f13fbb401982a079e437", - "sem.forms.inputfield.userinput.textcolor.error.focus": "e80ced5a6cbdfb228795508f1e18ba272dc698cb", - "sem.forms.inputfield.placeholder.textcolor.default.rest": "1aeda301c43292f8529c8ae820e98870685176f6", - "sem.forms.inputfield.placeholder.textcolor.default.hover": "fb0a6a4d99d92a39c3a0436bbac52e40cab4f71c", - "sem.forms.inputfield.placeholder.textcolor.default.pressed": "493f837eea8e4814f6dc75a6a4138f920b284eac", - "sem.forms.inputfield.placeholder.textcolor.default.focus": "93b78177304e810f0080deb0f5b4734ff797e4f4", - "sem.forms.inputfield.placeholder.textcolor.default.disabled": "97acd3fbc35cbd2c782bbaa3cafde10c922ca03e", - "sem.forms.inputfield.placeholder.textcolor.default.readonly": "ebf26956b960fbd44a72eb1c984aff6bff401b73", - "sem.forms.inputfield.placeholder.textcolor.error.rest": "66028815e4aa0f3f1507130e0c2a151a6d9ae6c2", - "sem.forms.inputfield.placeholder.textcolor.error.hover": "5cb9b0cbc29f61fec8061e5f84d193e910c768c1", - "sem.forms.inputfield.placeholder.textcolor.error.pressed": "ac051389c0ed04f57314618d00b3e14034f1a938", - "sem.forms.inputfield.placeholder.textcolor.error.focus": "d0b80cc1a7a02f6ad1a8b2a709c718426ba5924a", "sem.forms.inputfield.container.bgcolor.default.rest": "0fb9433dbe1483eace5f5e84f0c951388b82f3bf", "sem.forms.inputfield.container.bgcolor.default.hover": "6a06a232d776eac6b3fa8faeb432383a231cfe93", "sem.forms.inputfield.container.bgcolor.default.pressed": "37c6084286332f15ce5b72f5c63d2075515f42d0", @@ -573,6 +547,26 @@ "sem.forms.inputfield.container.bordercolor.error.hover": "a57924a7c52ebbddc7cea95971fc655ba0d0bd95", "sem.forms.inputfield.container.bordercolor.error.pressed": "e9e8657f64225e65c7af59f5a95fe36303e98d56", "sem.forms.inputfield.container.bordercolor.error.focus": "cac3235edf1c02789d3781fc5293183afdba6d21", + "sem.forms.inputfield.icon.iconcolor.default.rest": "0d5f90b6afc5e5c9c0a42d791c317a2169cd2867", + "sem.forms.inputfield.icon.iconcolor.default.hover": "7e9d2173a5ee99feadcc26dd0d40feafed42b68c", + "sem.forms.inputfield.icon.iconcolor.default.pressed": "d135648c8aefc6e514a784b073307abd60b883bb", + "sem.forms.inputfield.icon.iconcolor.default.focus": "0b0ad08cf82ad913d805d98b8af27654e609fd57", + "sem.forms.inputfield.icon.iconcolor.default.disabled": "5953bec23d8dcf115e5193bcafbe84dc38cab8f8", + "sem.forms.inputfield.icon.iconcolor.default.readonly": "d46bb247d5cc4f723d5c88781ab846ee27fb180a", + "sem.forms.inputfield.icon.iconcolor.error.rest": "719a7432a68715324051d99c16303958587612e4", + "sem.forms.inputfield.icon.iconcolor.error.hover": "cb852e8cfa92852743cb56e207d01b7ea26bf5d1", + "sem.forms.inputfield.icon.iconcolor.error.pressed": "e3fdf7e1921df2fb9b48100e2a3ec7234244b2a4", + "sem.forms.inputfield.icon.iconcolor.error.focus": "b67fe10f3616ef2ca907c7ef37d58c963126e2cf", + "sem.forms.inputfield.placeholder.textcolor.default.rest": "1aeda301c43292f8529c8ae820e98870685176f6", + "sem.forms.inputfield.placeholder.textcolor.default.hover": "fb0a6a4d99d92a39c3a0436bbac52e40cab4f71c", + "sem.forms.inputfield.placeholder.textcolor.default.pressed": "493f837eea8e4814f6dc75a6a4138f920b284eac", + "sem.forms.inputfield.placeholder.textcolor.default.focus": "93b78177304e810f0080deb0f5b4734ff797e4f4", + "sem.forms.inputfield.placeholder.textcolor.default.disabled": "97acd3fbc35cbd2c782bbaa3cafde10c922ca03e", + "sem.forms.inputfield.placeholder.textcolor.default.readonly": "ebf26956b960fbd44a72eb1c984aff6bff401b73", + "sem.forms.inputfield.placeholder.textcolor.error.rest": "66028815e4aa0f3f1507130e0c2a151a6d9ae6c2", + "sem.forms.inputfield.placeholder.textcolor.error.hover": "5cb9b0cbc29f61fec8061e5f84d193e910c768c1", + "sem.forms.inputfield.placeholder.textcolor.error.pressed": "ac051389c0ed04f57314618d00b3e14034f1a938", + "sem.forms.inputfield.placeholder.textcolor.error.focus": "d0b80cc1a7a02f6ad1a8b2a709c718426ba5924a", "sem.forms.inputfield.prefixsuffix.textcolor.default.rest": "a97e4c88943dac605c1dd95a199107fc68c621ff", "sem.forms.inputfield.prefixsuffix.textcolor.default.hover": "a9bfe560e23f1133ceaec13eba07d6819249be26", "sem.forms.inputfield.prefixsuffix.textcolor.default.pressed": "67b88589de80189827647458f8752a5dc7632d22", @@ -583,6 +577,16 @@ "sem.forms.inputfield.prefixsuffix.textcolor.error.hover": "7488ffa21556d4d64ce8bcca32ed9bb6427ab085", "sem.forms.inputfield.prefixsuffix.textcolor.error.pressed": "0022dc3e37d0494f51e65f890d0e91f1de4335e1", "sem.forms.inputfield.prefixsuffix.textcolor.error.focus": "6467ae6121d05f03b0bd14ba24a6ca389bef061a", + "sem.forms.inputfield.userinput.textcolor.default.rest": "336b21df9cf800f043d490b54cce32da43d04b5c", + "sem.forms.inputfield.userinput.textcolor.default.hover": "726e8369d2af8229da8c97adee71e391e24aefd7", + "sem.forms.inputfield.userinput.textcolor.default.pressed": "48b9d34f3448af2ec340983bcf2c9aca081f9322", + "sem.forms.inputfield.userinput.textcolor.default.focus": "dd874c42b27a6358a7b323cb9f676d5b8fcc6967", + "sem.forms.inputfield.userinput.textcolor.default.disabled": "efbe6242fd9b17d145ad88ede3103457b5358aa6", + "sem.forms.inputfield.userinput.textcolor.default.readonly": "fb53339d9a1d16a4bb6b2ce7783d4546f4f4ab0d", + "sem.forms.inputfield.userinput.textcolor.error.rest": "378d2d42b98d02f44b896da0f3c57e626e036eca", + "sem.forms.inputfield.userinput.textcolor.error.hover": "6a2099f728bb05439127cb7c8b918ca206f179e3", + "sem.forms.inputfield.userinput.textcolor.error.pressed": "29483da954c99f6a8e46f13fbb401982a079e437", + "sem.forms.inputfield.userinput.textcolor.error.focus": "e80ced5a6cbdfb228795508f1e18ba272dc698cb", "sem.global.focusring.bordercolor": "c5978aef1851f99885658504cbe0e07769c42c16", "sem.ui.headline.default": "ea3f96e428868e54fb489ec93ad279cfa2cbb66e", "sem.ui.paragraph.default": "44f1264c62977fea86f6fb7d7d3a44aa8f4af7f1", @@ -2344,4 +2348,4 @@ }, "group": "Sizes" } -] +] \ No newline at end of file diff --git a/packages/figma-design-tokens/input/tokens/cmp/color.json b/packages/figma-design-tokens/input/tokens/cmp/color.json index 350d44374..8bb4dff4f 100644 --- a/packages/figma-design-tokens/input/tokens/cmp/color.json +++ b/packages/figma-design-tokens/input/tokens/cmp/color.json @@ -273,7 +273,7 @@ "Container": { "BorderColor": { "Neutral": { - "value": "{sys.bgcolor.container.informative}", + "value": "{sys.bordercolor.container.informative}", "type": "color" }, "Warning": { @@ -448,36 +448,6 @@ } } }, - "InputIcon": { - "Icon": { - "IconColor": { - "Rest": { - "value": "{sys.content.inverse.regular.informative.rest}", - "type": "color" - }, - "Hover": { - "value": "{sys.content.inverse.regular.informative.hover}", - "type": "color" - }, - "Pressed": { - "value": "{sys.content.inverse.regular.informative.pressed}", - "type": "color" - }, - "Focus": { - "value": "{sys.content.inverse.regular.informative.rest}", - "type": "color" - }, - "Disabled": { - "value": "{sys.content.inverse.regular.disabled}", - "type": "color" - }, - "Error": { - "value": "{sys.content.inverse.regular.danger.rest}", - "type": "color" - } - } - } - }, "Loader": { "Background": { "BorderColor": { diff --git a/packages/figma-design-tokens/input/tokens/cmp/sizeVariants.json b/packages/figma-design-tokens/input/tokens/cmp/sizeVariants.json index 305f99578..ea6892647 100644 --- a/packages/figma-design-tokens/input/tokens/cmp/sizeVariants.json +++ b/packages/figma-design-tokens/input/tokens/cmp/sizeVariants.json @@ -276,4 +276,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/figma-design-tokens/input/tokens/cmp/sizes.json b/packages/figma-design-tokens/input/tokens/cmp/sizes.json index c63860275..d95c75991 100644 --- a/packages/figma-design-tokens/input/tokens/cmp/sizes.json +++ b/packages/figma-design-tokens/input/tokens/cmp/sizes.json @@ -1925,26 +1925,6 @@ } } }, - "Select": { - "SM": { - "IconPaddingRight": { - "value": "{core.dimensionPX.12}", - "type": "spacing" - } - }, - "MD": { - "IconPaddingRight": { - "value": "{core.dimensionPX.12}", - "type": "spacing" - } - }, - "LG": { - "IconPaddingRight": { - "value": "{core.dimensionPX.16}", - "type": "spacing" - } - } - }, "Slider": { "Thumb": { "Shape": { @@ -3209,4 +3189,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/figma-design-tokens/input/tokens/sem/colors.json b/packages/figma-design-tokens/input/tokens/sem/colors.json index eab706bdf..eaf525298 100644 --- a/packages/figma-design-tokens/input/tokens/sem/colors.json +++ b/packages/figma-design-tokens/input/tokens/sem/colors.json @@ -904,191 +904,191 @@ } }, "inputfield": { - "userinput": { - "textcolor": { + "container": { + "bgcolor": { "default": { "rest": { - "value": "{sys.content.container.regular.neutral}", + "value": "{sys.bgcolor.container.neutral}", "type": "color" }, "hover": { - "value": "{sys.content.container.regular.neutral}", + "value": "{sys.bgcolor.container.neutral}", "type": "color" }, "pressed": { - "value": "{sys.content.container.regular.neutral}", + "value": "{sys.bgcolor.container.neutral}", "type": "color" }, "focus": { - "value": "{sys.content.container.regular.neutral}", + "value": "{sys.bgcolor.container.neutral}", "type": "color" }, "disabled": { - "value": "{sys.content.container.regular.disabled}", + "value": "{sys.bgcolor.container.disabled}", "type": "color" }, "readonly": { - "value": "{sys.content.container.regular.neutral}", + "value": "{sys.bgcolor.container.disabled}", "type": "color" } }, "error": { "rest": { - "value": "{sys.content.container.regular.danger}", + "value": "{sys.bgcolor.container.danger}", "type": "color" }, "hover": { - "value": "{sys.content.container.regular.danger}", + "value": "{sys.bgcolor.container.danger}", "type": "color" }, "pressed": { - "value": "{sys.content.container.regular.danger}", + "value": "{sys.bgcolor.container.danger}", "type": "color" }, "focus": { - "value": "{sys.content.container.regular.danger}", + "value": "{sys.bgcolor.container.danger}", "type": "color" } } - } - }, - "placeholder": { - "textcolor": { + }, + "bordercolor": { "default": { "rest": { - "value": "{sys.content.container.subtle.neutral}", + "value": "{sys.bordercolor.container.neutral}", "type": "color" }, "hover": { - "value": "{sys.content.container.subtle.neutral}", + "value": "{sys.bordercolor.container.neutral}", "type": "color" }, "pressed": { - "value": "{sys.content.container.subtle.neutral}", + "value": "{sys.bordercolor.container.neutral}", "type": "color" }, "focus": { - "value": "{sys.content.container.subtle.neutral}", + "value": "{sys.bordercolor.global.focusring}", "type": "color" }, "disabled": { - "value": "{sys.content.container.regular.disabled}", + "value": "{sys.bordercolor.container.disabled}", "type": "color" }, "readonly": { - "value": "{sys.content.container.subtle.neutral}", + "value": "{sys.bordercolor.container.disabled}", "type": "color" } }, "error": { "rest": { - "value": "{sys.content.container.subtle.danger}", + "value": "{sys.bordercolor.container.danger}", "type": "color" }, "hover": { - "value": "{sys.content.container.subtle.danger}", + "value": "{sys.bordercolor.container.danger}", "type": "color" }, "pressed": { - "value": "{sys.content.container.subtle.danger}", + "value": "{sys.bordercolor.container.danger}", "type": "color" }, "focus": { - "value": "{sys.content.container.subtle.danger}", + "value": "{sys.bordercolor.container.danger}", "type": "color" } } } }, - "container": { - "bgcolor": { + "icon": { + "iconcolor": { "default": { "rest": { - "value": "{sys.bgcolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "hover": { - "value": "{sys.bgcolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "pressed": { - "value": "{sys.bgcolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "focus": { - "value": "{sys.bgcolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "disabled": { - "value": "{sys.bgcolor.container.disabled}", + "value": "{sys.content.container.regular.disabled}", "type": "color" }, "readonly": { - "value": "{sys.bgcolor.container.disabled}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" } }, "error": { "rest": { - "value": "{sys.bgcolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" }, "hover": { - "value": "{sys.bgcolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" }, "pressed": { - "value": "{sys.bgcolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" }, "focus": { - "value": "{sys.bgcolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" } } - }, - "bordercolor": { + } + }, + "placeholder": { + "textcolor": { "default": { "rest": { - "value": "{sys.bordercolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "hover": { - "value": "{sys.bordercolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "pressed": { - "value": "{sys.bordercolor.container.neutral}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "focus": { - "value": "{sys.bordercolor.global.focusring}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" }, "disabled": { - "value": "{sys.bordercolor.container.disabled}", + "value": "{sys.content.container.regular.disabled}", "type": "color" }, "readonly": { - "value": "{sys.bordercolor.container.disabled}", + "value": "{sys.content.container.subtle.neutral}", "type": "color" } }, "error": { "rest": { - "value": "{sys.bordercolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" }, "hover": { - "value": "{sys.bordercolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" }, "pressed": { - "value": "{sys.bordercolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" }, "focus": { - "value": "{sys.bordercolor.container.danger}", + "value": "{sys.content.container.subtle.danger}", "type": "color" } } @@ -1151,6 +1151,54 @@ } } } + }, + "userinput": { + "textcolor": { + "default": { + "rest": { + "value": "{sys.content.container.regular.neutral}", + "type": "color" + }, + "hover": { + "value": "{sys.content.container.regular.neutral}", + "type": "color" + }, + "pressed": { + "value": "{sys.content.container.regular.neutral}", + "type": "color" + }, + "focus": { + "value": "{sys.content.container.regular.neutral}", + "type": "color" + }, + "disabled": { + "value": "{sys.content.container.regular.disabled}", + "type": "color" + }, + "readonly": { + "value": "{sys.content.container.regular.neutral}", + "type": "color" + } + }, + "error": { + "rest": { + "value": "{sys.content.container.regular.danger}", + "type": "color" + }, + "hover": { + "value": "{sys.content.container.regular.danger}", + "type": "color" + }, + "pressed": { + "value": "{sys.content.container.regular.danger}", + "type": "color" + }, + "focus": { + "value": "{sys.content.container.regular.danger}", + "type": "color" + } + } + } } } }, diff --git a/packages/figma-design-tokens/input/tokens/sem/sizes.json b/packages/figma-design-tokens/input/tokens/sem/sizes.json index 32ae3b540..2b9ee15ca 100644 --- a/packages/figma-design-tokens/input/tokens/sem/sizes.json +++ b/packages/figma-design-tokens/input/tokens/sem/sizes.json @@ -135,6 +135,22 @@ "type": "borderWidth" } } + }, + "icon": { + "iconsize": { + "sm": { + "value": "{core.dimensionREM.16}", + "type": "sizing" + }, + "md": { + "value": "{core.dimensionREM.24}", + "type": "sizing" + }, + "lg": { + "value": "{core.dimensionREM.24}", + "type": "sizing" + } + } } }, "inputslot": { diff --git a/packages/figma-design-tokens/input/tokens/sys/dark.json b/packages/figma-design-tokens/input/tokens/sys/dark.json index 5012dd7c1..0324e6856 100644 --- a/packages/figma-design-tokens/input/tokens/sys/dark.json +++ b/packages/figma-design-tokens/input/tokens/sys/dark.json @@ -1147,7 +1147,7 @@ }, "global": { "focusring": { - "value": "{core.color.coolgray.100.solid}", + "value": "{core.color.white.solid}", "type": "color", "description": "use for focus ring" } diff --git a/packages/figma-design-tokens/input/tokens/sys/light.json b/packages/figma-design-tokens/input/tokens/sys/light.json index a881b47cf..2d850010f 100644 --- a/packages/figma-design-tokens/input/tokens/sys/light.json +++ b/packages/figma-design-tokens/input/tokens/sys/light.json @@ -336,7 +336,7 @@ "type": "color" }, "informative": { - "value": "{core.color.coolgray.400.solid}", + "value": "{core.color.coolgray.300.solid}", "type": "color", "description": "Use on: Counter" } @@ -353,20 +353,20 @@ "description": "use for secondary elements on inputs as placeholder, inputIcon. Also prefix and sufix while input is empty." }, "danger": { - "value": "{core.color.crimson.300.opa70}", + "value": "{core.color.crimson.300.opa80}", "type": "color" }, "warning": { - "value": "{core.color.gold.200.opa70}", + "value": "{core.color.gold.200.opa80}", "type": "color", "description": "Use on: Counter" }, "safe": { - "value": "{core.color.limegreen.200.opa70}", + "value": "{core.color.limegreen.200.opa80}", "type": "color" }, "informative": { - "value": "{core.color.coolgray.400.opa70}", + "value": "{core.color.coolgray.300.opa80}", "type": "color", "description": "Use on: Counter" } @@ -890,7 +890,7 @@ "type": "color" }, "informative": { - "value": "{core.color.coolgray.400.solid}", + "value": "{core.color.azure.800.solid}", "type": "color", "description": "Use on: Counter" } diff --git a/packages/ui-library/src/components/input-field-text/index.css.ts b/packages/ui-library/src/components/input-field-text/index.css.ts index 9877d75b4..0297ca221 100644 --- a/packages/ui-library/src/components/input-field-text/index.css.ts +++ b/packages/ui-library/src/components/input-field-text/index.css.ts @@ -1,6 +1,7 @@ import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals"; import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated"; +import type { semanticTokens } from "../../foundation/_tokens-generated/semanticTokensType.generated"; export const styleCustom = typeSafeNestedCss` .blr-input-field-text { @@ -12,26 +13,88 @@ export const styleCustom = typeSafeNestedCss` .blr-input-field-text:disabled { pointer-events: none; } +`; - .blr-input-icon:hover { - cursor: pointer; - } +function getInputIconStyles(options: { semanticTokens: semanticTokens }) { + const iconClassName = "icon-input"; + const { inputfield } = options.semanticTokens.sem.forms; - .blr-input-icon:disabled { - cursor: none; - } + return typeSafeNestedCss` + :host { + .${iconClassName} { + cursor: pointer; + position: relative; + color: ${inputfield.icon.iconcolor.default.rest}; - .noPointerEvents { - pointer-events: none; - } -`; + &.no-pointer-events { + pointer-events: none; + cursor: default; + } + + &.sm { + height: ${inputfield.icon.iconsize.sm}; + width: ${inputfield.icon.iconsize.sm}; + } + &.md { + height: ${inputfield.icon.iconsize.md}; + width: ${inputfield.icon.iconsize.md}; + } + &.lg { + height: ${inputfield.icon.iconsize.lg}; + width: ${inputfield.icon.iconsize.lg}; + } + } + + .blr-input-wrapper { + &:hover .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.hover}; + } + + &:focus-within .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.focus}; + } + + &:active .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.pressed}; + } + + &:has(input[readonly]):not(.error-input) .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.readonly}; + } + + &.disabled .${iconClassName}{ + color: ${inputfield.icon.iconcolor.default.disabled}; + } + + &.error-input { + .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.rest}; + } + + &:hover .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.hover}; + } + + &:focus-within .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.focus}; + } + + &:active .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.pressed}; + } + } + } + } + `; +} export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTextDark } = renderThemedCssStrings( (_componentTokens, semanticTokens) => { const { inputfield, inputslot, labelslot } = semanticTokens.sem.forms; - const { InputIcon } = _componentTokens.cmp; return typeSafeNestedCss` + ${getInputIconStyles({ semanticTokens }).cssText} + .blr-input-field-text { &.sm { @@ -182,11 +245,6 @@ export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTex border-radius: ${inputfield.container.borderradius}; box-sizing: border-box; - .blr-input-icon { - position: relative; - color: ${inputfield.placeholder.textcolor.default.rest}; - } - &.sm { padding: ${inputfield.container.padding.sm}; margin: ${inputslot.margin.sm}; @@ -208,15 +266,6 @@ export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTex border-color: ${inputfield.container.border.default.hover.color}; color: ${inputfield.userinput.textcolor.default.hover}; background-color: ${inputfield.container.bgcolor.default.hover}; - - &.blr-input-icon { - color: ${InputIcon.Icon.IconColor.Hover}; - } - - &.error-input:not(.disabled) + .blr-input-icon { - color: ${inputfield.container.border.error.rest.color}; - cursor: default; - } } &.focus { @@ -244,10 +293,6 @@ export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTex background: transparent; cursor: not-allowed; } - - .blr-input-icon { - color: ${inputfield.placeholder.textcolor.default.rest}; - } } &[readonly] { @@ -302,10 +347,6 @@ export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTex background-color: ${inputfield.container.bgcolor.error.pressed}; } - .blr-input-icon { - color: ${inputfield.container.border.error.rest.color}; - } - .blr-form-input { background: transparent; color: ${inputfield.userinput.textcolor.error.rest}; diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts index 1148d0660..4de5a64f5 100644 --- a/packages/ui-library/src/components/input-field-text/index.ts +++ b/packages/ui-library/src/components/input-field-text/index.ts @@ -1,4 +1,4 @@ -import { html, nothing } from 'lit'; +import { PropertyValueMap, html, nothing } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { property, query, state } from 'lit/decorators.js'; import { styleCustom } from './index.css'; @@ -25,6 +25,7 @@ import { createBlrTextValueChangeEvent, } from '../../globals/events'; import { LitElementCustom } from '../../utils/lit-element-custom'; +import { BlrIconEventHandlers } from '../icon'; export type BlrInputFieldTextEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; @@ -74,7 +75,17 @@ export class BlrInputFieldText extends LitElementCustom { @state() protected currentType: InputTypes = this.type; @state() protected isFocused = false; + protected willUpdate(_changedProperties: PropertyValueMap | Map): void { + if (_changedProperties.get('type')) { + this.currentType = this.type; + } + } + protected togglePassword = () => { + if (this.type !== 'password') { + return; + } + this.currentType = this.currentType === 'password' ? 'text' : 'password'; }; @@ -106,12 +117,55 @@ export class BlrInputFieldText extends LitElementCustom { } }; + protected handleIconClick: BlrIconEventHandlers['blrClick'] = () => { + if (this.disabled) { + return; + } + + this.togglePassword(); + }; + + protected renderInputIcon() { + if (this.type !== 'password' && !this.hasIcon) { + return nothing; + } + + const iconSizeVariant = getComponentConfigToken([ + 'sem', + 'forms', + 'inputfield', + 'icon', + 'sizevariant', + this.sizeVariant!, + ]).toLowerCase() as SizesType; + + const iconClasses = classMap({ + 'icon-input': true, + [this.sizeVariant!]: this.sizeVariant!, + 'no-pointer-events': Boolean(this.disabled || this.type !== 'password'), + }); + + const iconName: SizelessIconType = + this.type === 'password' ? (this.currentType === 'password' ? 'blrEyeOff' : 'blrEyeOn') : this.icon; + + return BlrIconRenderFunction( + { + icon: calculateIconName(iconName, iconSizeVariant), + sizeVariant: iconSizeVariant, + classMap: iconClasses, + fillParent: false, + blrClick: this.handleIconClick, + }, + { + 'aria-hidden': this.type !== 'password', + } + ); + } + protected render() { if (this.sizeVariant) { const dynamicStyles = this.theme === 'Light' ? [formLight, inputFieldTextLight] : [formDark, inputFieldTextDark]; - const wasInitialPasswordField = Boolean(this.type === 'password'); - const classes = classMap({ [`${this.sizeVariant}`]: this.sizeVariant, }); @@ -127,26 +181,7 @@ export class BlrInputFieldText extends LitElementCustom { [`${this.sizeVariant}`]: this.sizeVariant, }); - const iconClasses = classMap({ - 'blr-input-icon': true, - [`${this.sizeVariant}`]: this.sizeVariant, - 'noPointerEvents': Boolean(this.disabled || this.readonly), - }); - - const getPasswordIcon = () => { - return this.currentType.includes('password') ? 'blrEyeOffSm' : 'blrEyeOnSm'; - }; - - const iconSizeVariant = getComponentConfigToken([ - 'sem', - 'forms', - 'inputfield', - 'icon', - 'sizevariant', - this.sizeVariant, - ]).toLowerCase() as SizesType; - - const getCaptionContent = () => html` + const captionContent = html` ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'hint', @@ -208,44 +243,10 @@ export class BlrInputFieldText extends LitElementCustom { @select=${this.handleSelect} /> - ${this.hasIcon && !wasInitialPasswordField && !this.readonly - ? html`${BlrIconRenderFunction( - { - icon: this.hasError - ? calculateIconName(`blrErrorFilled`, iconSizeVariant) - : calculateIconName(this.icon, iconSizeVariant), - sizeVariant: iconSizeVariant, - classMap: iconClasses, - fillParent: false, - }, - { - 'aria-hidden': true, - 'name': - (this.hasError - ? calculateIconName(`blrErrorFilled`, iconSizeVariant) - : calculateIconName(this.icon, iconSizeVariant)) || '', - } - )}` - : nothing} - ${wasInitialPasswordField && !this.readonly - ? html`${BlrIconRenderFunction( - { - icon: this.hasError ? calculateIconName(`blrErrorFilled`, iconSizeVariant) : getPasswordIcon(), - sizeVariant: iconSizeVariant, - classMap: iconClasses, - fillParent: false, - blrClick: this.togglePassword, - }, - { - 'aria-hidden': true, - 'name': - (this.hasError ? calculateIconName(`blrErrorFilled`, iconSizeVariant) : getPasswordIcon()) || '', - } - )}` - : nothing} + ${this.renderInputIcon()} ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage) - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent()) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent) : nothing} `; diff --git a/packages/ui-library/src/components/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts index 9ad852fc1..7d59c145d 100644 --- a/packages/ui-library/src/components/select/index.css.ts +++ b/packages/ui-library/src/components/select/index.css.ts @@ -1,6 +1,7 @@ import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals"; import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated"; +import type { semanticTokens } from "../../foundation/_tokens-generated/semanticTokensType.generated"; export const styleCustom = typeSafeNestedCss` .blr-select-option { @@ -10,12 +11,79 @@ export const styleCustom = typeSafeNestedCss` } `; +function getDirectionIndicatorIconStyles(options: { semanticTokens: semanticTokens }) { + const iconClassName = "icon-direction-indicator"; + const { inputfield } = options.semanticTokens.sem.forms; + + return typeSafeNestedCss` + :host { + .${iconClassName} { + pointer-events: none; + position: relative; + color: ${inputfield.icon.iconcolor.default.rest}; + + &.sm { + height: ${inputfield.icon.iconsize.sm}; + width: ${inputfield.icon.iconsize.sm}; + } + &.md { + height: ${inputfield.icon.iconsize.md}; + width: ${inputfield.icon.iconsize.md}; + } + &.lg { + height: ${inputfield.icon.iconsize.lg}; + width: ${inputfield.icon.iconsize.lg}; + } + } + + .blr-select-wrapper { + &:hover .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.hover}; + } + + &:focus-within .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.focus}; + } + + &:active .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.pressed}; + } + + &.disabled { + .${iconClassName} { + color: ${inputfield.icon.iconcolor.default.disabled}; + } + } + + &.error, .error.disabled { + .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.rest}; + } + + &:hover .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.hover}; + } + + &:focus-within .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.focus}; + } + + &:active .${iconClassName} { + color: ${inputfield.icon.iconcolor.error.pressed}; + } + } + } + } + `; +} + export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark } = renderThemedCssStrings( (_componentTokens, semanticTokens) => { const { inputfield, inputslot, labelslot } = semanticTokens.sem.forms; - const { InputIcon } = _componentTokens.cmp; return typeSafeNestedCss` + ${getDirectionIndicatorIconStyles({ semanticTokens }).cssText} + :host { .blr-select { &.sm { @@ -43,10 +111,6 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark display: none; } - .blr-input-icon { - pointer-events: none; - } - .blr-select-inner-container { flex-grow: 1; flex-shrink: 1; @@ -172,11 +236,6 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark overflow: hidden; } - .blr-input-icon { - position: relative; - color: ${0}; - } - &.sm { padding: ${inputfield.container.padding.sm}; margin: ${inputslot.margin.sm}; @@ -199,11 +258,7 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark color: ${inputfield.userinput.textcolor.default.hover}; background-color: ${inputfield.container.bgcolor.default.hover}; - &.blr-input-icon { - color: ${InputIcon.Icon.IconColor.Rest}; - } - - &.error-select:not(.disabled) + .blr-input-icon { + &.error-select:not(.disabled) { color: ${inputfield.container.border.error.rest.color}; cursor: default; } @@ -235,10 +290,6 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark background: transparent; cursor: not-allowed; } - - .blr-input-icon { - color: ${InputIcon.Icon.IconColor.Rest}; - } } &[readonly] { @@ -293,10 +344,6 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark background-color: ${inputfield.container.bgcolor.error.pressed}; } - .blr-input-icon { - color: ${InputIcon.Icon.IconColor.Error}; - } - .blr-form-select { background: transparent; color: ${inputfield.userinput.textcolor.error.rest}; diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts index 5c3e4e27a..fbbf4b8ad 100644 --- a/packages/ui-library/src/components/select/index.stories.ts +++ b/packages/ui-library/src/components/select/index.stories.ts @@ -32,7 +32,7 @@ const defaultParams: BlrSelectType = { disabled: false, required: false, hasError: false, - errorMessage: ' ', + errorMessage: '', errorMessageIcon: undefined, arialabel: 'Select', selectId: 'selectId', diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index 5c2d28409..de3e9f46f 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/packages/ui-library/src/components/select/index.ts @@ -1,5 +1,5 @@ import { html, nothing } from 'lit'; -import { ClassMapDirective, classMap } from 'lit/directives/class-map.js'; +import { classMap } from 'lit/directives/class-map.js'; import { property, query, state } from 'lit/decorators.js'; import { styleCustom } from './index.css'; import { FormSizesType, SizesType } from '../../globals/types'; @@ -7,7 +7,6 @@ import { selectInputLight, selectInputDark } from './index.css'; import { SizelessIconType } from '@boiler/icons'; import { formDark, formLight } from '../../foundation/semantic-tokens/form.css'; import { calculateIconName } from '../../utils/calculate-icon-name'; -import { DirectiveResult } from 'lit-html/directive'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { getComponentConfigToken } from '../../utils/get-component-config-token'; import { BlrIconRenderFunction } from '../icon/renderFunction'; @@ -50,7 +49,7 @@ export class BlrSelect extends LitElementCustom { @property() hasLabel?: boolean; @property() label!: string; @property() disabled?: boolean; - @property() sizeVariant?: FormSizesType = 'md'; + @property() sizeVariant: FormSizesType = 'md'; @property() required?: boolean; @property() blrBlur?: HTMLElement['blur']; @property() blrFocus?: HTMLElement['focus']; @@ -96,7 +95,12 @@ export class BlrSelect extends LitElementCustom { ); } - protected renderIcon(classes: DirectiveResult) { + protected renderIcon() { + const classes = classMap({ + 'icon-direction-indicator': true, + [this.sizeVariant]: this.sizeVariant, + }); + if (this.sizeVariant) { const iconSizeVariant = getComponentConfigToken([ 'sem', @@ -107,35 +111,44 @@ export class BlrSelect extends LitElementCustom { this.sizeVariant, ]).toLowerCase() as SizesType; - if (this.hasError) { - return BlrIconRenderFunction( - { - icon: calculateIconName('blrErrorFilled', iconSizeVariant), - sizeVariant: iconSizeVariant, - classMap: classes, - fillParent: false, - }, - { - 'aria-hidden': true, - } - ); - } else { - const modifiedIcon = this.icon ? this.icon : 'blrChevronDown'; - return BlrIconRenderFunction( - { - icon: calculateIconName(modifiedIcon, iconSizeVariant), - sizeVariant: iconSizeVariant, - classMap: classes, - fillParent: false, - }, - { - 'aria-hidden': true, - } - ); - } + const modifiedIcon = this.icon ? this.icon : 'blrChevronDown'; + return BlrIconRenderFunction( + { + icon: calculateIconName(modifiedIcon, iconSizeVariant), + sizeVariant: iconSizeVariant, + classMap: classes, + fillParent: false, + }, + { + 'aria-hidden': true, + } + ); } } + protected renderCaptionContent() { + return html` + ${this.hasHint && (this.hintMessage || this.hintMessageIcon) + ? BlrFormCaptionRenderFunction({ + variant: 'hint', + theme: this.theme, + sizeVariant: this.sizeVariant, + message: this.hintMessage, + icon: this.hintMessageIcon, + }) + : nothing} + ${this.hasError && (this.errorMessage || this.errorMessageIcon) + ? BlrFormCaptionRenderFunction({ + variant: 'error', + theme: this.theme, + sizeVariant: this.sizeVariant, + message: this.errorMessage, + icon: this.errorMessageIcon, + }) + : nothing} + `; + } + protected render() { if (this.sizeVariant) { const dynamicStyles = this.theme === 'Light' ? [formLight, selectInputLight] : [formDark, selectInputDark]; @@ -148,31 +161,6 @@ export class BlrSelect extends LitElementCustom { 'focus': this.isFocused || false, }); - const iconClasses = classMap({ - 'blr-input-icon': true, - [this.sizeVariant]: this.sizeVariant, - }); - const getCaptionContent = () => html` - ${this.hasHint && (this.hintMessage || this.hintMessageIcon) - ? BlrFormCaptionRenderFunction({ - variant: 'hint', - theme: this.theme, - sizeVariant: this.sizeVariant, - message: this.hintMessage, - icon: this.hintMessageIcon, - }) - : nothing} - ${this.hasError && (this.errorMessage || this.errorMessageIcon) - ? BlrFormCaptionRenderFunction({ - variant: 'error', - theme: this.theme, - sizeVariant: this.sizeVariant, - message: this.errorMessage, - icon: this.errorMessageIcon, - }) - : nothing} - `; - return html`