From 16dc073ad946ac5273a488f9bd4de2bd30ef8229 Mon Sep 17 00:00:00 2001
From: Aleksandra Danilina <29692746+Al-Dani@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:38:01 +0100
Subject: [PATCH] feat: Make color-border-input-focused token themeable (#1894)

---
 .../__snapshots__/design-tokens.test.ts.snap  | 98 +++++++++++++++++++
 .../visual-refresh/metadata/colors.ts         |  6 ++
 2 files changed, 104 insertions(+)

diff --git a/src/__tests__/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
index 4eb3b274a5..09e1d6a283 100644
--- a/src/__tests__/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
@@ -461,6 +461,13 @@ Object {
             "light": "#687078",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#0073bb",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -2735,6 +2742,13 @@ Object {
             "light": "#687078",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#0073bb",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -5009,6 +5023,13 @@ Object {
             "light": "#687078",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#fafafa",
+            "light": "#fafafa",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -7283,6 +7304,13 @@ Object {
             "light": "#687078",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#16191f",
+            "light": "#16191f",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -9557,6 +9585,13 @@ Object {
             "light": "#879596",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#00a1c9",
+            "light": "#00a1c9",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -11831,6 +11866,13 @@ Object {
         "light": "#687078",
       },
     },
+    "color-border-input-focused": Object {
+      "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+      "$value": Object {
+        "dark": "#00a1c9",
+        "light": "#0073bb",
+      },
+    },
     "color-border-item-focused": Object {
       "$description": "The color of focus states. For example: the focus ring around interactive elements.",
       "$value": Object {
@@ -14110,6 +14152,13 @@ Object {
             "light": "#7d8998",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#033160",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -16384,6 +16433,13 @@ Object {
             "light": "#5f6b7a",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#b5d6f4",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -18658,6 +18714,13 @@ Object {
             "light": "#7d8998",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#033160",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -20932,6 +20995,13 @@ Object {
             "light": "#7d8998",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#033160",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -23206,6 +23276,13 @@ Object {
             "light": "#7d8998",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#033160",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -25480,6 +25557,13 @@ Object {
             "light": "#5f6b7a",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#b5d6f4",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -27754,6 +27838,13 @@ Object {
             "light": "#5f6b7a",
           },
         },
+        "color-border-input-focused": Object {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": Object {
+            "dark": "#b5d6f4",
+            "light": "#b5d6f4",
+          },
+        },
         "color-border-item-focused": Object {
           "$description": "The color of focus states. For example: the focus ring around interactive elements.",
           "$value": Object {
@@ -30028,6 +30119,13 @@ Object {
         "light": "#7d8998",
       },
     },
+    "color-border-input-focused": Object {
+      "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+      "$value": Object {
+        "dark": "#b5d6f4",
+        "light": "#033160",
+      },
+    },
     "color-border-item-focused": Object {
       "$description": "The color of focus states. For example: the focus ring around interactive elements.",
       "$value": Object {
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 265c130e95..0ca0e5f150 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -295,6 +295,12 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBorderInputFocused: {
+    description:
+      'The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.',
+    public: true,
+    themeable: true,
+  },
   colorBorderItemPlaceholder: {
     description: 'The border color for dividers.',
   },