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
 
 ### Focus rings

packages/ui-pill/src/Pill/README.md

@@ -11,85 +11,6 @@ you can use the `statusLabel` prop to add a label to the left of the main text.
 ---
 type: example
 ---
-<div>
-
-<InstUISettingsProvider theme={canvas}>
-<div>
-  <Pill
-    margin="x-small"
-  >
-    Excused
-  </Pill>
-  <Pill
-    statusLabel="Status"
-    color="info"
-    margin="x-small"
-  >
-    Draft
-  </Pill>
-  <Pill
-    statusLabel="Status"
-    renderIcon={<IconCheckLine />}
-    color="success"
-    margin="x-small"
-  >
-    Checked In
-  </Pill>
-  <Pill
-    renderIcon={<IconClockLine />}
-    color="warning"
-    margin="x-small"
-  >
-    Late
-  </Pill>
-  <Pill
-    renderIcon={<IconMessageLine />}
-    color="error"
-    margin="x-small"
-  >
-    Notification
-  </Pill>
-</div>
-</InstUISettingsProvider>
-<InstUISettingsProvider theme={canvasHighContrast}>
-<div>
-  <Pill
-    margin="x-small"
-  >
-    Excused
-  </Pill>
-  <Pill
-    statusLabel="Status"
-    color="info"
-    margin="x-small"
-  >
-    Draft
-  </Pill>
-  <Pill
-    statusLabel="Status"
-    renderIcon={<IconCheckLine />}
-    color="success"
-    margin="x-small"
-  >
-    Checked In
-  </Pill>
-  <Pill
-    renderIcon={<IconClockLine />}
-    color="warning"
-    margin="x-small"
-  >
-    Late
-  </Pill>
-  <Pill
-    renderIcon={<IconMessageLine />}
-    color="error"
-    margin="x-small"
-  >
-    Notification
-  </Pill>
-</div>
-</InstUISettingsProvider>
-<InstUISettingsProvider theme={rebrandLight}>
 <div>
   <Pill
     margin="x-small"
@@ -105,67 +26,27 @@ type: example
   </Pill>
   <Pill
     statusLabel="Status"
-    renderIcon={<IconCheckLine />}
+    renderIcon={<CheckInstUIIcon size="sm" />}
     color="success"
     margin="x-small"
   >
     Checked In
   </Pill>
   <Pill
-    renderIcon={<IconClockLine />}
+    renderIcon={<Clock4InstUIIcon size="sm" />}
     color="warning"
     margin="x-small"
   >
     Late
   </Pill>
   <Pill
-    renderIcon={<IconMessageLine />}
+    renderIcon={<MailInstUIIcon size="sm" />}
     color="error"
     margin="x-small"
   >
     Notification
   </Pill>
 </div>
-</InstUISettingsProvider>
-<InstUISettingsProvider theme={rebrandDark}>
-<div>
-  <Pill
-    margin="x-small"
-  >
-    Excused
-  </Pill>
-  <Pill
-    statusLabel="Status"
-    color="info"
-    margin="x-small"
-  >
-    Draft
-  </Pill>
-  <Pill
-    statusLabel="Status"
-    renderIcon={<IconCheckLine />}
-    color="success"
-    margin="x-small"
-  >
-    Checked In
-  </Pill>
-  <Pill
-    renderIcon={<IconClockLine />}
-    color="warning"
-    margin="x-small"
-  >
-    Late
-  </Pill>
-  <Pill
-    renderIcon={<IconMessageLine />}
-    color="error"
-    margin="x-small"
-  >
-    Notification
-  </Pill>
-</div>
-</InstUISettingsProvider>
-</div>
 ```
 
 The component has a `max-width`, set by its theme. Any overflowing text will be handled via ellipses.

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

@@ -68,15 +68,15 @@ const generateStyle = (
       label: 'pill',
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center',
       boxSizing: 'border-box',
       padding: `0 ${componentTheme.paddingHorizontal}`,
       background: componentTheme.backgroundColor,
       borderWidth: componentTheme.borderWidth,
       borderStyle: componentTheme.borderStyle,
       borderRadius: componentTheme.borderRadius,
-      /* line-height does not account for top/bottom border width */
-      lineHeight: `calc(${componentTheme.height} - (${componentTheme.borderWidth} * 2))`,
+      fontFamily: componentTheme.fontFamily,
+      height: componentTheme.height,
+      lineHeight: componentTheme.lineHeight,
       ...pillColorVariants[color!]
     },
     status: {