Initial commit (#362)

src/badge/badge.styles.ts

@@ -27,18 +27,20 @@ export const badgeStyles = (
 		font-family: ${fontFamily};
 		font-size: ${typeRampMinus1FontSize};
 		line-height: ${typeRampMinus1LineHeight};
+		text-align: center;
 	}
 	.control {
 		align-items: center;
 		background-color: ${badgeBackground};
 		border: calc(${borderWidth} * 1px) solid ${buttonBorder};
-		border-radius: 100px;
+		border-radius: 11px;
 		box-sizing: border-box;
 		color: ${badgeForeground};
 		display: flex;
 		height: calc(${designUnit} * 4px);
 		justify-content: center;
-		min-width: calc(${designUnit} * 4px);
-		padding: 0 calc(${designUnit} * 1px);
+		min-width: calc(${designUnit} * 4px + 2px);
+		min-height: calc(${designUnit} * 4px + 2px);
+		padding: 3px 6px;
 	}
 `;

src/button/button.styles.ts

@@ -183,7 +183,7 @@ const IconButtonStyles = css`
 	}
 	:host([appearance='icon']) .control {
 		padding: ${buttonIconPadding};
-		border: calc(${borderWidth} * 1px) solid transparent;
+		border: none;
 	}
 	:host([appearance='icon']:active) .control:active {
 		background: ${buttonIconHoverBackground};

src/checkbox/checkbox.styles.ts

@@ -14,7 +14,6 @@ import {
 	checkboxBackground,
 	checkboxBorder,
 	checkboxCornerRadius,
-	cornerRadius,
 	designUnit,
 	disabledOpacity,
 	focusBorder,
@@ -38,8 +37,8 @@ export const checkboxStyles = (
 	}
 	.control {
 		position: relative;
-		width: calc(${designUnit} * 4px);
-		height: calc(${designUnit} * 4px);
+		width: calc(${designUnit} * 4px + 2px);
+		height: calc(${designUnit} * 4px + 2px);
 		box-sizing: border-box;
 		border-radius: calc(${checkboxCornerRadius} * 1px);
 		border: calc(${borderWidth} * 1px) solid ${checkboxBorder};
@@ -87,7 +86,6 @@ export const checkboxStyles = (
 	}
 	:host(:${focusVisible}) .control {
 		border: calc(${borderWidth} * 1px) solid ${focusBorder};
-		border-radius: ${cornerRadius};
 	}
 	:host(.disabled) .label,
 	:host(.readonly) .label,

src/design-tokens.ts

@@ -79,7 +79,7 @@ export const buttonSecondaryBackground = create<string>('button-secondary-backgr
 export const buttonSecondaryForeground = create<string>('button-secondary-foreground', '--vscode-button-secondaryForeground').withDefault('#ffffff');
 export const buttonSecondaryHoverBackground = create<string>('button-secondary-hover-background', '--vscode-button-secondaryHoverBackground').withDefault('#45494e');
 export const buttonPaddingHorizontal = create<string>('button-padding-horizontal').withDefault('11px');
-export const buttonPaddingVertical = create<string>('button-padding-vertical').withDefault('6px');
+export const buttonPaddingVertical = create<string>('button-padding-vertical').withDefault('4px');
 
 /**
  * Checkbox design tokens.

src/dropdown/dropdown.styles.ts

@@ -56,7 +56,7 @@ export const dropdownStyles = (
 		font-size: ${typeRampBaseFontSize};
 		line-height: ${typeRampBaseLineHeight};
 		min-height: 100%;
-		padding: 0 calc(${designUnit} * 2px);
+		padding: 2px 6px 2px 8px;
 		width: 100%;
 	}
 	.listbox {

src/text-area/text-area.styles.ts

@@ -102,7 +102,7 @@ export const textAreaStyles = (
 		cursor: pointer;
 		font-size: ${typeRampBaseFontSize};
 		line-height: ${typeRampBaseLineHeight};
-		margin-bottom: calc(${designUnit} * 1px);
+		margin-bottom: 2px;
 	}
 	.label__hidden {
 		display: none;

src/text-field/text-field.styles.ts

@@ -74,7 +74,7 @@ export const textFieldStyles = (
 		cursor: pointer;
 		font-size: ${typeRampBaseFontSize};
 		line-height: ${typeRampBaseLineHeight};
-		margin-bottom: calc(${designUnit} * 1px);
+		margin-bottom: 2px;
 	}
 	.label__hidden {
 		display: none;
@@ -92,10 +92,10 @@ export const textFieldStyles = (
 		height: calc(${designUnit} * 4px);
 	}
 	.start {
-		margin-inline-start: 11px;
+		margin-inline-start: calc(${designUnit} * 2px);
 	}
 	.end {
-		margin-inline-end: 11px;
+		margin-inline-end: calc(${designUnit} * 2px);
 	}
 	:host(:hover:not([disabled])) .root {
 		background: ${inputBackground};