Add rounded corners to input components (#510)

Creates a new cornerRadiusRound design token and applies that to the button, text area, and text field components.
microsoft · Oct 11, 2023 · 4554f79 · 4554f79
1 parent 21ec3ec
commit 4554f79
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts
@@ -26,6 +26,7 @@ import {
 	buttonSecondaryForeground,
 	buttonSecondaryHoverBackground,
 	contrastActiveBorder,
+	cornerRadiusRound,
 	designUnit,
 	disabledOpacity,
 	focusBorder,
@@ -62,7 +63,7 @@ const BaseButtonStyles = css`
 		line-height: ${typeRampBaseLineHeight};
 		color: ${buttonPrimaryForeground};
 		background: ${buttonPrimaryBackground};
-		border-radius: 2px;
+		border-radius: calc(${cornerRadiusRound} * 1px);
 		fill: currentColor;
 		cursor: pointer;
 	}

diff --git a/src/design-tokens.ts b/src/design-tokens.ts
@@ -29,6 +29,7 @@ export const borderWidth = create<number>('border-width').withDefault(1);
 export const contrastActiveBorder = create<string>('contrast-active-border', '--vscode-contrastActiveBorder').withDefault('#f38518');
 export const contrastBorder = create<string>('contrast-border', '--vscode-contrastBorder').withDefault('#6fc3df');
 export const cornerRadius = create<number>('corner-radius').withDefault(0);
+export const cornerRadiusRound = create<number>('corner-radius-round').withDefault(2);
 export const designUnit = create<number>('design-unit').withDefault(4);
 export const disabledOpacity = create<number>('disabled-opacity').withDefault(0.4);
 export const focusBorder = create<string>('focus-border', '--vscode-focusBorder').withDefault('#007fd4');

diff --git a/src/text-area/text-area.styles.ts b/src/text-area/text-area.styles.ts
@@ -11,7 +11,7 @@ import {
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
-	cornerRadius,
+	cornerRadiusRound,
 	designUnit,
 	disabledOpacity,
 	dropdownBorder,
@@ -44,7 +44,7 @@ export const textAreaStyles = (
 		position: relative;
 		color: ${inputForeground};
 		background: ${inputBackground};
-		border-radius: calc(${cornerRadius} * 1px);
+		border-radius: calc(${cornerRadiusRound} * 1px);
 		border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
 		font: inherit;
 		font-size: ${typeRampBaseFontSize};

diff --git a/src/text-field/text-field.styles.ts b/src/text-field/text-field.styles.ts
@@ -11,7 +11,7 @@ import {
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
-	cornerRadius,
+	cornerRadiusRound,
 	designUnit,
 	disabledOpacity,
 	dropdownBorder,
@@ -42,7 +42,7 @@ export const textFieldStyles = (
 		flex-direction: row;
 		color: ${inputForeground};
 		background: ${inputBackground};
-		border-radius: calc(${cornerRadius} * 1px);
+		border-radius: calc(${cornerRadiusRound} * 1px);
 		border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
 		height: calc(${inputHeight} * 1px);
 		min-width: ${inputMinWidth};