fix(ui-library): pressed state removed and updated focus state for re…

…adonly (#1172) * fix(ui-library): pressed state removed and updated focus state for readonly * fix(ui-library): updated focus and hover state for text area and input field * fix(ui-library): eslint fix * fix: deletes all sem.inputfields....pressed tokens * fix: deletes inputflield border tokens pressed * fix: removed active states from css --------- Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> Co-authored-by: Lars Erbach <larserbach@users.noreply.github.com>
deven-org · Jan 7, 2025 · c9d9ea5 · c9d9ea5
1 parent ba7966e
commit c9d9ea5
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 237 deletions.
diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
@@ -380,63 +380,51 @@
       "sem.forms.fieldset.legend.textcolor.error": "de8204419ce941eb30742e83ed535d7cb29bd6d3",
       "sem.forms.inputfield.container.bgcolor.default.rest": "0fb9433dbe1483eace5f5e84f0c951388b82f3bf",
       "sem.forms.inputfield.container.bgcolor.default.hover": "6a06a232d776eac6b3fa8faeb432383a231cfe93",
-      "sem.forms.inputfield.container.bgcolor.default.pressed": "37c6084286332f15ce5b72f5c63d2075515f42d0",
       "sem.forms.inputfield.container.bgcolor.default.focus": "bbd9ac2904859c4f4ccda354acf5a02a9400a8a1",
       "sem.forms.inputfield.container.bgcolor.default.disabled": "253b6d097387f81a7aea85fb8c0e4bf55c31c4bd",
       "sem.forms.inputfield.container.bgcolor.default.readonly": "cad4e379acbd7562a3f0f4458ad61604ed774dcb",
       "sem.forms.inputfield.container.bgcolor.error.rest": "f3d12672b92c674c3e43539768cf17c98ce829c1",
       "sem.forms.inputfield.container.bgcolor.error.hover": "b8d840301115f9d791a18a55c176682743544dd3",
-      "sem.forms.inputfield.container.bgcolor.error.pressed": "1db01a2066990eaf36c8d93b7b2e3bbb322728e9",
       "sem.forms.inputfield.container.bgcolor.error.focus": "a19420d1686a40065296b41ceb661853d428e6d7",
       "sem.forms.inputfield.container.bordercolor.default.rest": "5dca11d0435522cfcd6f86511b36227a2a547d7f",
       "sem.forms.inputfield.container.bordercolor.default.hover": "6e3974fa292160e7453abc75802aee450fe2be6b",
-      "sem.forms.inputfield.container.bordercolor.default.pressed": "ef0b715075a2bab2b3ad16ed938e57c5d9630ef8",
       "sem.forms.inputfield.container.bordercolor.default.focus": "4fe269e4c3d891223dcf123bf675aae12cc7d969",
       "sem.forms.inputfield.container.bordercolor.default.disabled": "df7c8fbeba63e56f97bb7ef25d7fef08093ca5a2",
       "sem.forms.inputfield.container.bordercolor.default.readonly": "1676cdd61298b598afd750ecd5057908832dcf44",
       "sem.forms.inputfield.container.bordercolor.error.rest": "17affc7514a134ca5d34e015cf2ef9d800602c73",
       "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",
       "sem.forms.inputfield.prefixsuffix.textcolor.default.focus": "72bebf7a6b77adbe99a7eb46538fe46a76cbe2f6",
       "sem.forms.inputfield.prefixsuffix.textcolor.default.disabled": "08237f0ae43c1606baa4f2f6f1c6e3dababd619b",
       "sem.forms.inputfield.prefixsuffix.textcolor.default.readonly": "c7339504c3a641e0dc78a35378e23edb497d9cd9",
       "sem.forms.inputfield.prefixsuffix.textcolor.error.rest": "a1c8cadb92edeba74d7ee5baec4254750f471512",
       "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",
@@ -1119,63 +1107,51 @@
       "sem.forms.fieldset.legend.textcolor.error": "de8204419ce941eb30742e83ed535d7cb29bd6d3",
       "sem.forms.inputfield.container.bgcolor.default.rest": "0fb9433dbe1483eace5f5e84f0c951388b82f3bf",
       "sem.forms.inputfield.container.bgcolor.default.hover": "6a06a232d776eac6b3fa8faeb432383a231cfe93",
-      "sem.forms.inputfield.container.bgcolor.default.pressed": "37c6084286332f15ce5b72f5c63d2075515f42d0",
       "sem.forms.inputfield.container.bgcolor.default.focus": "bbd9ac2904859c4f4ccda354acf5a02a9400a8a1",
       "sem.forms.inputfield.container.bgcolor.default.disabled": "253b6d097387f81a7aea85fb8c0e4bf55c31c4bd",
       "sem.forms.inputfield.container.bgcolor.default.readonly": "cad4e379acbd7562a3f0f4458ad61604ed774dcb",
       "sem.forms.inputfield.container.bgcolor.error.rest": "f3d12672b92c674c3e43539768cf17c98ce829c1",
       "sem.forms.inputfield.container.bgcolor.error.hover": "b8d840301115f9d791a18a55c176682743544dd3",
-      "sem.forms.inputfield.container.bgcolor.error.pressed": "1db01a2066990eaf36c8d93b7b2e3bbb322728e9",
       "sem.forms.inputfield.container.bgcolor.error.focus": "a19420d1686a40065296b41ceb661853d428e6d7",
       "sem.forms.inputfield.container.bordercolor.default.rest": "5dca11d0435522cfcd6f86511b36227a2a547d7f",
       "sem.forms.inputfield.container.bordercolor.default.hover": "6e3974fa292160e7453abc75802aee450fe2be6b",
-      "sem.forms.inputfield.container.bordercolor.default.pressed": "ef0b715075a2bab2b3ad16ed938e57c5d9630ef8",
       "sem.forms.inputfield.container.bordercolor.default.focus": "4fe269e4c3d891223dcf123bf675aae12cc7d969",
       "sem.forms.inputfield.container.bordercolor.default.disabled": "df7c8fbeba63e56f97bb7ef25d7fef08093ca5a2",
       "sem.forms.inputfield.container.bordercolor.default.readonly": "1676cdd61298b598afd750ecd5057908832dcf44",
       "sem.forms.inputfield.container.bordercolor.error.rest": "17affc7514a134ca5d34e015cf2ef9d800602c73",
       "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",
       "sem.forms.inputfield.prefixsuffix.textcolor.default.focus": "72bebf7a6b77adbe99a7eb46538fe46a76cbe2f6",
       "sem.forms.inputfield.prefixsuffix.textcolor.default.disabled": "08237f0ae43c1606baa4f2f6f1c6e3dababd619b",
       "sem.forms.inputfield.prefixsuffix.textcolor.default.readonly": "c7339504c3a641e0dc78a35378e23edb497d9cd9",
       "sem.forms.inputfield.prefixsuffix.textcolor.error.rest": "a1c8cadb92edeba74d7ee5baec4254750f471512",
       "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",

diff --git a/packages/figma-design-tokens/input/tokens/sem/borders.json b/packages/figma-design-tokens/input/tokens/sem/borders.json
@@ -327,14 +327,6 @@
                   "style": "solid"
                 }
               },
-              "pressed": {
-                "$type": "border",
-                "$value": {
-                  "color": "{sem.forms.inputfield.container.bordercolor.default.pressed}",
-                  "width": "{sem.forms.inputfield.container.borderwidth.pressed}",
-                  "style": "solid"
-                }
-              },
               "focus": {
                 "$type": "border",
                 "$value": {
@@ -377,14 +369,6 @@
                   "style": "solid"
                 }
               },
-              "pressed": {
-                "$type": "border",
-                "$value": {
-                  "color": "{sem.forms.inputfield.container.bordercolor.error.pressed}",
-                  "width": "{sem.forms.inputfield.container.borderwidth.pressed}",
-                  "style": "solid"
-                }
-              },
               "focus": {
                 "$type": "border",
                 "$value": {

diff --git a/packages/figma-design-tokens/input/tokens/sem/colors.json b/packages/figma-design-tokens/input/tokens/sem/colors.json
@@ -915,10 +915,6 @@
                 "$type": "color",
                 "$value": "{sys.bgcolor.container.neutral}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.bgcolor.container.neutral}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.bgcolor.container.neutral}"
@@ -941,10 +937,6 @@
                 "$type": "color",
                 "$value": "{sys.bgcolor.container.danger}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.bgcolor.container.danger}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.bgcolor.container.danger}"
@@ -961,10 +953,6 @@
                 "$type": "color",
                 "$value": "{sys.bordercolor.container.neutral}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.bordercolor.container.neutral}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.bordercolor.global.focusring}"
@@ -987,10 +975,6 @@
                 "$type": "color",
                 "$value": "{sys.bordercolor.container.danger}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.bordercolor.container.danger}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.bordercolor.container.danger}"
@@ -1009,10 +993,6 @@
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.subtle}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.neutral.subtle}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.subtle}"
@@ -1035,10 +1015,6 @@
                 "$type": "color",
                 "$value": "{sys.content.container.danger.subtle}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.danger.subtle}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.danger.subtle}"
@@ -1057,10 +1033,6 @@
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.subtle}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.neutral.subtle}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.subtle}"
@@ -1083,10 +1055,6 @@
                 "$type": "color",
                 "$value": "{sys.content.container.danger.subtle}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.danger.subtle}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.danger.subtle}"
@@ -1107,11 +1075,6 @@
                 "$value": "{sys.content.container.neutral.subtle}",
                 "$description": "Apply on prefix- or suffix-texts of an input which is already populated with content.  e.g: Numberfield"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.neutral.subtle}",
-                "$description": "Apply on prefix- or suffix-texts of an input which is already populated with content.  e.g: Numberfield"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.subtle}",
@@ -1139,11 +1102,6 @@
                 "$value": "{sys.content.container.danger.subtle}",
                 "$description": "Apply on prefix- or suffix-texts of an input which is already populated with content.  e.g: Numberfield"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.danger.subtle}",
-                "$description": "Apply on prefix- or suffix-texts of an input which is already populated with content.  e.g: Numberfield"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.danger.subtle}",
@@ -1163,10 +1121,6 @@
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.regular}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.neutral.regular}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.neutral.regular}"
@@ -1189,10 +1143,6 @@
                 "$type": "color",
                 "$value": "{sys.content.container.danger.regular}"
               },
-              "pressed": {
-                "$type": "color",
-                "$value": "{sys.content.container.danger.regular}"
-              },
               "focus": {
                 "$type": "color",
                 "$value": "{sys.content.container.danger.regular}"