feat(ui-pill): migrate to new theming system

Author: git-nandor

docs/guides/upgrade-guide.md

@@ -76,6 +76,37 @@ The new icons automatically sync with theme changes, support all InstUI color to
 - `alert` color has been removed. Please use `primary` instead.
 - Some prop values have been deprecated, see [Text](/Text) for more details.
 
+### Pill
+
+#### Deprecated color prop values
+
+The following `color` prop values have been **removed**:
+
+- `'danger'` - use `'error'` instead
+- `'alert'` - use `'info'` instead
+
+#### Theme variable changes
+
+- theme variable `fontFamily` has been added
+- theme variable `padding` has been renamed to `paddingHorizontal` (now only controls horizontal padding)
+- theme variable `background` has been renamed to `backgroundColor`
+- theme variable `primaryColor` has been split into:
+  - `baseTextColor` (for text color)
+  - `baseBorderColor` (for border color)
+- theme variable `successColor` has been split into:
+  - `successTextColor` (for text color)
+  - `successBorderColor` (for border color)
+- theme variable `infoColor` has been split into:
+  - `infoTextColor` (for text color)
+  - `infoBorderColor` (for border color)
+- theme variable `warningColor` has been split into:
+  - `warningTextColor` (for text color)
+  - `warningBorderColor` (for border color)
+- theme variable `dangerColor` has been removed, replaced with:
+  - `errorTextColor` (for text color)
+  - `errorBorderColor` (for border color)
+- theme variable `alertColor` has been removed (use `info*` variables instead)
+
 ## API Changes
 
 ### RadioInput

packages/ui-pill/src/Pill/styles.ts

@@ -74,8 +74,9 @@ const generateStyle = (
       padding: `0 ${componentTheme.paddingHorizontal}`,
       background: componentTheme.backgroundColor,
       borderWidth: componentTheme.borderWidth,
-      borderStyle: componentTheme.borderStyle.style,
+      borderStyle: componentTheme.borderStyle,
       borderRadius: componentTheme.borderRadius,
+      fontFamily: componentTheme.fontFamily,
       /* line-height does not account for top/bottom border width */
       lineHeight: `calc(${componentTheme.height} - (${componentTheme.borderWidth} * 2))`,
       ...pillColorVariants[color!]