fix(ui-library, tokens): #1014 create & use tokens for inputfield icon (

#1036) Co-authored-by: larserbach <[email protected]>
deven-org · Apr 18, 2024 · dc549f0 · dc549f0
1 parent c48ce41
commit dc549f0
Show file tree

Hide file tree

Showing 14 changed files with 406 additions and 345 deletions.
diff --git 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"
   }
-]
+]
diff --git 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
@@ -276,4 +276,4 @@
       }
     }
   }
-}
+}
diff --git 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 @@
       }
     }
   }
-}
+}