fix: Use correct text size in Text Input, Search Field, and Text Area (…

…#1150)
Amsterdam · Apr 4, 2024 · d5462e4 · d5462e4
1 parent ee3428a
commit d5462e4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -18,7 +18,7 @@ export const SearchFieldButton = forwardRef(
   ({ className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
     <button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
       <VisuallyHidden>Zoeken</VisuallyHidden>
-      <Icon svg={SearchIcon} size="level-6" square />
+      <Icon svg={SearchIcon} size="level-5" square />
     </button>
   ),
 )

diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -17,9 +17,9 @@
         },
         "color": { "value": "{ams.color.primary-black}" },
         "font-family": { "value": "{ams.text.font-family}" },
-        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
-        "line-height": { "value": "{ams.text.level.6.line-height}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "padding-block": { "value": "{ams.space.inside.xs}" },
         "padding-inline": { "value": "{ams.space.inside.md}" },
@@ -28,8 +28,8 @@
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
           },
           "color": { "value": "{ams.color.primary-blue}" },
-          "height": { "value": "{ams.text.level.6.font-size}" },
-          "width": { "value": "{ams.text.level.6.font-size}" }
+          "height": { "value": "{ams.text.level.5.font-size}" },
+          "width": { "value": "{ams.text.level.5.font-size}" }
         },
         "hover": {
           "box-shadow": {

diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json
@@ -4,11 +4,11 @@
       "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
-      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
       "min-height": {
-        "value": "calc({ams.text.level.6.line-height} * 1em + 2 * {ams.text-area.padding-block})"
+        "value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})"
       },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "padding-block": { "value": "0.5rem" },

diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json
@@ -4,9 +4,9 @@
       "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
-      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "padding-block": { "value": "{ams.space.inside.xs}" },
       "padding-inline": { "value": "{ams.space.inside.md}" },