feat: Make color-border-input-focused token themeable (#1894)

cloudscape-design · Jan 17, 2024 · 16dc073 · 16dc073
1 parent 1bbe2c9
commit 16dc073
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 0 deletions.
diff --git 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
@@ -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.',
   },