@ornikar/bumper 3.9.1 → 3.10.1

package/docs/migration/Typography.md

@@ -24,23 +24,23 @@ import { Typography } from '@ornikar/bumper';
 
 ### Typography.Text / Typography.Header\*
 
-| Source Prop                                   | Target Prop                                    | Transform                                              | Notes                                                                                |
-| --------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------ |
-| `base="body-m"`                               | `variant="body-m"`                             | Rename prop `base` → `variant`                         | When used as the only size prop (non-responsive)                                     |
-| `base` + `medium` + `large` etc.              | `variant` + `$md` + `$lg` etc.                 | See [Responsive Typography](#responsive-typography)    | Legacy breakpoint props become Tamagui media props                                   |
-| `type={{ base: "body-m", medium: "body-l" }}` | `variant="body-m" $md={{ variant: "body-l" }}` | Destructure `type` object into `variant` + media props | See [Responsive Typography](#responsive-typography)                                  |
-| `variant="regular"`                           | `weight="regular"`                             | Rename prop `variant` → `weight`                       | Only applies to body variants                                                        |
-| `variant="bold"`                              | `weight="bold"`                                | Rename prop `variant` → `weight`                       | Only applies to body variants                                                        |
-| `variant="semibold"`                          | Remove                                         | Remove prop                                            | Headings/labels are always semibold by default; body variants don't support semibold |
-| `color="black"`                               | `color="$content.base.hi"`                     | Map color value                                        | See [Color Mapping](#color-mapping)                                                  |
-| `accessibilityRole`                           | Remove                                         | Remove prop                                            | Sub-components handle roles automatically                                            |
-| `textAlign`                                   | `textAlign`                                    | Keep as-is                                             | Same API                                                                             |
-| `textTransform`                               | `textTransform`                                | Keep as-is                                             | content-caps auto-applies uppercase in both                                          |
-| `underline`                                   | `textDecorationLine="underline"`               | Convert boolean to style prop                          | —                                                                                    |
-| `strikeThrough`                               | `textDecorationLine="line-through"`            | Convert boolean to style prop                          | —                                                                                    |
-| `_web={{ ... }}`                              | `$platform-web={{ ... }}`                      | Rename platform prop                                   | Tamagui media query syntax                                                           |
-| `_ios={{ ... }}`                              | `$platform-native={{ ... }}`                   | Rename platform prop                                   | No iOS-specific prop; use platform-native                                            |
-| `_android={{ ... }}`                          | `$platform-native={{ ... }}`                   | Rename platform prop                                   | No Android-specific prop; use platform-native                                        |
+| Source Prop                                   | Target Prop                                        | Transform                                              | Notes                                                                                |
+| --------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------ |
+| `base="body-m"`                               | `variant="body-m"`                                 | Rename prop `base` → `variant`                         | When used as the only size prop (non-responsive)                                     |
+| `base` + `medium` + `large` etc.              | `variant` + `$medium` + `$large` etc.              | See [Responsive Typography](#responsive-typography)    | Legacy breakpoint props become Tamagui media props                                   |
+| `type={{ base: "body-m", medium: "body-l" }}` | `variant="body-m" $medium={{ variant: "body-l" }}` | Destructure `type` object into `variant` + media props | See [Responsive Typography](#responsive-typography)                                  |
+| `variant="regular"`                           | `weight="regular"`                                 | Rename prop `variant` → `weight`                       | Only applies to body variants                                                        |
+| `variant="bold"`                              | `weight="bold"`                                    | Rename prop `variant` → `weight`                       | Only applies to body variants                                                        |
+| `variant="semibold"`                          | Remove                                             | Remove prop                                            | Headings/labels are always semibold by default; body variants don't support semibold |
+| `color="black"`                               | `color="$content.base.hi"`                         | Map color value                                        | See [Color Mapping](#color-mapping)                                                  |
+| `accessibilityRole`                           | Remove                                             | Remove prop                                            | Sub-components handle roles automatically                                            |
+| `textAlign`                                   | `textAlign`                                        | Keep as-is                                             | Same API                                                                             |
+| `textTransform`                               | `textTransform`                                    | Keep as-is                                             | content-caps auto-applies uppercase in both                                          |
+| `underline`                                   | `textDecorationLine="underline"`                   | Convert boolean to style prop                          | —                                                                                    |
+| `strikeThrough`                               | `textDecorationLine="line-through"`                | Convert boolean to style prop                          | —                                                                                    |
+| `_web={{ ... }}`                              | `$platform-web={{ ... }}`                          | Rename platform prop                                   | Tamagui media query syntax                                                           |
+| `_ios={{ ... }}`                              | `$platform-native={{ ... }}`                       | Rename platform prop                                   | No iOS-specific prop; use platform-native                                            |
+| `_android={{ ... }}`                          | `$platform-native={{ ... }}`                       | Rename platform prop                                   | No Android-specific prop; use platform-native                                        |
 
 ### TypographyLink → Typography.Link
 
@@ -58,11 +58,13 @@ import { Typography } from '@ornikar/bumper';
 
 ### TypographyIcon → Typography.Icon
 
-| Source Prop | Target Prop | Transform       | Notes                                                                                 |
-| ----------- | ----------- | --------------- | ------------------------------------------------------------------------------------- |
-| `icon`      | `icon`      | Keep as-is      | Same API                                                                              |
-| `color`     | `color`     | Map color value | See [Color Mapping](#color-mapping); `"inherit"` value removed — omit prop to inherit |
-| `size`      | `size`      | Map to token    | Numeric values → `$icon.s` (16) / `$icon.m` (20) / `$icon.l` (24)                     |
+| Source Prop | Target Prop | Transform       | Notes                                                                                                                                                                            |
+| ----------- | ----------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`      | `icon`      | Keep as-is      | Same API                                                                                                                                                                         |
+| `color`     | `color`     | Map color value | See [Color Mapping](#color-mapping); `"inherit"` value removed — omit prop to inherit                                                                                            |
+| `size`      | `size`      | Map to token    | `16` → `$icon.s`, `20` → `$icon.m`, `24` → `$icon.l`. **Any other numeric value (e.g. `40`, `32`) has no bumper token** — see [Unsupported icon sizes](#unsupported-icon-sizes). |
+| `align`     | `alignSelf` | Rename prop     | `align="center"` → `alignSelf="center"`                                                                                                                                          |
+| `testID`    | `testID`    | Keep as-is      | Same API                                                                                                                                                                         |
 
 ## Value Mappings
 
@@ -150,10 +152,12 @@ These are the most common colors found in the codebase. They need the `kitt.bump
 
 ```
 16  → "$icon.s"
-20  → "$icon.m"
+20  → "$icon.m"   (kitt-universal default when size is omitted)
 24  → "$icon.l"
 ```
 
+**Unsupported sizes**: bumper's icon tokens only cover `s` / `m` / `l`. Sizes such as `40` and `32` have no equivalent token (`$icon.xl` does not exist — see [`bumperIcon.ts`](../../src/system/core/tokens/bumperIcon.ts)). Leave such call sites on `@ornikar/kitt-universal`'s `Icon` / `TypographyIcon`, or flag with a `// TODO: bumper has no matching icon size` comment — do not auto-migrate.
+
 ## Sub-Component Mapping
 
 | Source                       | Target               | Notes                                                                                         |
@@ -179,12 +183,22 @@ Source uses legacy breakpoint props or a `type` object. Target uses Tamagui medi
 
 ```
 base   → variant (the base/default value)
-small  → $sm={{ variant: "..." }}
-medium → $md={{ variant: "..." }}
-large  → $lg={{ variant: "..." }}
-wide   → $xl={{ variant: "..." }}
+small  → $small={{ variant: "..." }}
+medium → $medium={{ variant: "..." }}
+large  → $large={{ variant: "..." }}
+wide   → $wide={{ variant: "..." }}
+```
+
+### Platform Props Mapping
+
+```
+_web={{ ... }}     → $platform-web={{ ... }}
+_ios={{ ... }}     → $platform-native={{ ... }}
+_android={{ ... }} → $platform-native={{ ... }}
 ```
 
+**Important**: `_ios` and `_android` are both mapped to `$platform-native`. There is no per-platform native prop in Tamagui — if the source had different iOS and Android overrides, they must be reconciled into a single `$platform-native` value.
+
 ### Examples
 
 ```tsx
@@ -194,7 +208,7 @@ wide   → $xl={{ variant: "..." }}
 </Typography.Text>
 
 // After
-<Typography.Text variant="body-s" $md={{ variant: "body-l" }}>
+<Typography.Text variant="body-s" $medium={{ variant: "body-l" }}>
   Responsive text
 </Typography.Text>
 ```
@@ -206,11 +220,23 @@ wide   → $xl={{ variant: "..." }}
 </Typography.Text>
 
 // After
-<Typography.Text variant="body-s" $md={{ variant: "body-m" }} $lg={{ variant: "body-l" }}>
+<Typography.Text variant="body-s" $medium={{ variant: "body-m" }} $large={{ variant: "body-l" }}>
   Responsive text
 </Typography.Text>
 ```
 
+```tsx
+// Before — platform-specific props
+<Typography.Text base="body-m" _web={{ style: { cursor: 'pointer' } }} _ios={{ style: { paddingTop: 2 } }}>
+  Platform text
+</Typography.Text>
+
+// After
+<Typography.Text variant="body-m" $platform-web={{ style: { cursor: 'pointer' } }} $platform-native={{ style: { paddingTop: 2 } }}>
+  Platform text
+</Typography.Text>
+```
+
 ## Children & Composition
 
 Children patterns are largely identical between source and target. Both accept:
@@ -288,11 +314,13 @@ Key differences:
 4. **No Typography.Paragraph**: Target has no Paragraph sub-component. Use Typography.Text.
 5. **No SetDefaultColor**: Target has no context provider for default colors. Colors must be set on each component individually.
 6. **No TypographyEmoji**: Target has no emoji sub-component.
-7. **Platform props syntax**: `_web`/`_ios`/`_android` → `$platform-web`/`$platform-native`.
-8. **Color inheritance**: Both support color inheritance via context, but the context APIs differ internally. Behavior is equivalent.
-9. **Responsive API**: Source uses breakpoint props (`base`, `medium`, `large`) or `type` object. Target uses Tamagui media props (`$sm`, `$md`, `$lg`).
+7. **Platform props syntax**: `_web` → `$platform-web`, `_ios`/`_android` → `$platform-native`. Note that both `_ios` and `_android` map to the same `$platform-native` prop — Tamagui has no per-platform native distinction. If the source used different values for iOS and Android, they must be reconciled manually.
+8. **Color inheritance**: When a `Typography.Text` is nested inside another bumper `Typography.*`, color propagates automatically via Tamagui's styled context — omit the `color` prop on the child and it will inherit the parent's value. However, inheritance **does NOT work** when the ancestor is a kitt-universal component that provides color via its own context (e.g., `Button`, `RadioGroup`, `CustomTooltip`). In those cases, **do not migrate** the `Typography.Text` — leave it on `@ornikar/kitt-universal`. See [Color inheritance from parent context](#color-inheritance-from-parent-context).
+9. **Responsive API**: Source uses breakpoint props (`base`, `medium`, `large`) or `type` object. Target uses Tamagui media props (`$small`, `$medium`, `$large`).
 10. **TypographyLink/TypographyIcon**: Source exports as standalone components. Target uses compound component pattern (`Typography.Link`, `Typography.Icon`).
 11. **Icon color="inherit"**: Source supports `color="inherit"`. Target does not — simply omit the color prop to inherit from parent.
+12. **Icon `align` prop renamed**: Source uses `align`; target uses `alignSelf`.
+13. **Icon tokens only cover s/m/l**: Source accepts any numeric `size`; target only has `$icon.s` (16), `$icon.m` (20), `$icon.l` (24). Other values have no equivalent.
 
 ## Edge Cases
 
@@ -436,6 +464,34 @@ const color = getTypographyColor(state); // should return '$content.accent', '$c
 <Typography.Text color={color}>text</Typography.Text>;
 ```
 
+### Color inheritance from parent context
+
+**Inheritance works automatically** when the parent is a bumper `Typography.*`. Tamagui's styled context propagates the color to descendants — omit the `color` prop on the child:
+
+```tsx
+// Parent sets the color; child inherits via Tamagui context
+<Typography.Text color="$content.accent">
+  Headline with <Typography.Text weight="bold">bold</Typography.Text> inside
+</Typography.Text>
+```
+
+**Inheritance does NOT work** when the ancestor is a kitt-universal component that provides color via its own (non-Tamagui) context. bumper's `Typography.Text` applies its default `$content.base.hi` and has no reliable way to read those foreign contexts.
+
+**Skip the migration entirely** in these cases — leave the `Typography.*` on `@ornikar/kitt-universal`. Known problematic ancestors:
+
+- `Button` (any variant that renders on a contrasted surface)
+- `RadioGroup`
+- `CustomTooltip`
+
+```tsx
+// ❌ DO NOT migrate — Button provides color via kitt's context, bumper cannot inherit it
+<Button type="primary">
+  <Typography.Text>Action</Typography.Text> {/* keep on @ornikar/kitt-universal */}
+</Button>
+```
+
+If you cannot leave the call site on kitt-universal (e.g. mixed-imports are undesirable), the only safe escape hatch is to pass the correct bumper token explicitly — but prefer skipping the migration over guessing the token.
+
 ### TypographyIcon with color="inherit"
 
 ```tsx
@@ -446,6 +502,31 @@ const color = getTypographyColor(state); // should return '$content.accent', '$c
 <Typography.Icon icon={<CheckIcon />} />
 ```
 
+### TypographyIcon with `align`
+
+```tsx
+// Before — kitt-universal supports align
+<TypographyIcon icon={<LoaderIcon />} align="center" />
+
+// After — bumper renames to alignSelf
+<Typography.Icon icon={<LoaderIcon />} alignSelf="center" />
+```
+
+### Unsupported icon sizes
+
+`bumper`'s icon tokens only cover `s` (16) / `m` (20) / `l` (24). Any other numeric size has no equivalent token.
+
+```tsx
+// Before
+<TypographyIcon icon={<AvatarIcon />} size={40} />
+
+// After — DO NOT auto-migrate. Either:
+// (a) leave the call site on kitt-universal's TypographyIcon, or
+// (b) flag for manual review:
+// TODO: bumper has no matching icon size for 40
+<TypographyIcon icon={<AvatarIcon />} size={40} />
+```
+
 ## Migration Rules (machine-readable)
 
 1. **Update import**: Replace `import { Typography } from '@ornikar/kitt-universal'` with `import { Typography } from '@ornikar/bumper'`
@@ -464,13 +545,18 @@ const color = getTypographyColor(state); // should return '$content.accent', '$c
 14. **Rename platform prop**: `_web={{ ... }}` → `$platform-web={{ ... }}`
 15. **Rename platform prop**: `_ios={{ ... }}` → `$platform-native={{ ... }}`
 16. **Rename platform prop**: `_android={{ ... }}` → `$platform-native={{ ... }}`
-17. **Convert responsive**: `type={{ base: X, small: Y, medium: Z, large: W, wide: V }}` → `variant={X} $sm={{ variant: Y }} $md={{ variant: Z }} $lg={{ variant: W }} $xl={{ variant: V }}`
-18. **Convert responsive shorthand**: `small="X"` → `$sm={{ variant: "X" }}`; `medium="X"` → `$md={{ variant: "X" }}`; `large="X"` → `$lg={{ variant: "X" }}`; `wide="X"` → `$xl={{ variant: "X" }}`
+17. **Convert responsive**: `type={{ base: X, small: Y, medium: Z, large: W, wide: V }}` → `variant={X} $small={{ variant: Y }} $medium={{ variant: Z }} $large={{ variant: W }} $wide={{ variant: V }}`
+18. **Convert responsive shorthand**: `small="X"` → `$small={{ variant: "X" }}`; `medium="X"` → `$medium={{ variant: "X" }}`; `large="X"` → `$large={{ variant: "X" }}`; `wide="X"` → `$wide={{ variant: "X" }}`
 19. **Map variant values**: Apply value mapping table (e.g. `heading-xxs` → `heading-2xs`, `label-small` → `label-s`)
 20. **Map color values**: Apply color mapping table (e.g. `"black"` → `"$content.base.hi"`, `"kitt.bumper.X"` → `"$X"`)
 21. **Remove weight on headings/labels**: If target `variant` is a heading or label type, remove the `weight` prop (it's fixed)
 22. **Icon color="inherit"**: Remove `color="inherit"` prop (omitting color achieves inheritance)
-23. **Icon size**: Map numeric sizes to tokens (`16` → `"$icon.s"`, `20` → `"$icon.m"`, `24` → `"$icon.l"`)
+23. **Icon size**: Map numeric sizes to tokens (`16` → `"$icon.s"`, `20` → `"$icon.m"`, `24` → `"$icon.l"`). **Omitted `size`** on the source (kitt-universal defaults to 20) also maps to `"$icon.m"`.
+24. **Color inheritance — prefer automatic inheritance, skip inside foreign contexts**:
+    - When the parent is a bumper `Typography.*` and the child has no `color` prop, inheritance works automatically via Tamagui's styled context — do not add an explicit `color`.
+    - When the ancestor is a kitt-universal component that provides color via its own context — specifically `Button`, `RadioGroup`, or `CustomTooltip` — **do not migrate** the nested `Typography.*`. Leave it on `@ornikar/kitt-universal`. Bumper cannot read those foreign contexts, so any migration would either regress the color or require a guessed explicit token.
+25. **Icon `align` → `alignSelf`**: Rename `align` to `alignSelf`.
+26. **Unsupported icon sizes**: If the source `size` is a numeric value other than `16` / `20` / `24`, do NOT migrate. Either leave the call site on `@ornikar/kitt-universal`'s `TypographyIcon`, or flag with a `// TODO: bumper has no matching icon size` comment.
 
 ## Not Migratable (requires human review)
 
@@ -482,3 +568,5 @@ const color = getTypographyColor(state); // should return '$content.accent', '$c
 - **NativeBase styled() extensions** — Must be migrated to Tamagui `styled()` with updated prop names.
 - **Type imports** — `TypographyTextProps`, `TypographyHeadingProps`, `TypographyColor`, `ExtendedTypographyColor` type imports must be updated to bumper equivalents.
 - **Platform-specific overrides merging** — Source has separate `_ios` and `_android` props. Target only has `$platform-native`. If different iOS/Android overrides were used, they need reconciliation.
+- **TypographyIcon with unsupported `size`** — Any numeric `size` other than `16` / `20` / `24` has no bumper token. Call sites must either stay on `@ornikar/kitt-universal` or be resized to a supported token manually.
+- **`Typography.*` nested inside `Button`, `RadioGroup`, or `CustomTooltip`** — These components provide text color via kitt's own (non-Tamagui) context; bumper cannot inherit from them. Leave such call sites on `@ornikar/kitt-universal`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.9.1",
+  "version": "3.10.1",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@ornikar/kitt-icons": "^15.3.0",
+    "@ornikar/kitt-icons": "^15.3.1",
     "@tamagui/core": "1.144.2",
     "@tamagui/image": "1.144.2",
     "@tamagui/scroll-view": "1.144.2"

package/src/.eslintrc.json

@@ -1,9 +1,6 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "@ornikar/bumper/tsconfig.eslint.json"
-  },
   "extends": [
     "@ornikar/eslint-config-typescript-react",
     "@ornikar/eslint-config/rollup",
@@ -12,8 +9,8 @@
   ],
   "settings": {
     "import/resolver": {
-      "node": {
-        "moduleDirectory": ["node_modules", "src"]
+      "typescript": {
+        "project": "@ornikar/bumper/tsconfig.json"
       }
     }
   },

package/src/shared/storybook/StorySection.tsx

@@ -2,8 +2,14 @@ import { styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
 import type { Except } from 'type-fest';
 import { VStack, type VStackProps } from '../../system/core/primitives/Stack';
+import type { ViewProps } from '../../system/core/primitives/View';
+import type { PropsToTamaguiVariants } from '../../system/types';
 import { StoryTitle } from './StoryTitle';
 
+interface InternalStorySectionWithoutMediaProps {
+  withBackground?: boolean;
+}
+
 const InternalStorySection = styled(VStack, {
   paddingVertical: '$space.4',
   paddingHorizontal: '$space.4',
@@ -12,8 +18,9 @@ const InternalStorySection = styled(VStack, {
       true: {
         backgroundColor: '$content.base.hi',
       },
+      false: {},
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<InternalStorySectionWithoutMediaProps, ViewProps>,
 });
 
 export type StorySectionProps = Except<VStackProps, 'marginBottom'> & {

package/src/shared/storybook/StoryTitle.tsx

@@ -1,5 +1,11 @@
+import type { GetProps } from '@tamagui/core';
 import { styled } from '@tamagui/core';
 import { InternalTypography } from '../../system/content/typography/Typography';
+import type { PropsToTamaguiVariants } from '../../system/types';
+
+interface StoryTitleWithoutMediaProps {
+  level?: 1 | 2 | 3;
+}
 
 export const StoryTitle = styled(InternalTypography, {
   variants: {
@@ -8,9 +14,9 @@ export const StoryTitle = styled(InternalTypography, {
       2: { variant: 'heading-l', marginBottom: '$space.4' },
       3: { variant: 'heading-m', marginBottom: '$space.4' },
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<StoryTitleWithoutMediaProps, GetProps<typeof InternalTypography>>,
 
   defaultVariants: {
     level: 1,
   },
-} as const);
+});

package/src/system/actions/Button/Button.mdx

@@ -39,7 +39,7 @@ Append `Button.Badge` after `Button.Text` to surface a count or dot indicator. P
 
 ## Disabled
 
-Set `disabled` to prevent interaction. Pointer events and focus are removed, and `aria-disabled` is set. The visual treatment differs by type — `primary` uses `$bg.disabled.mid`, while `secondary` and `danger` show a `$border.disabled` outline.
+Set `disabled` to prevent interaction. Pointer events and focus are removed, and `aria-disabled` is set. The visual treatment differs by type — `primary` uses `$bg.disabled.hi` with `$content.disabled.onContrasted` label for contrast, while `secondary` and `danger` show a `$border.disabled` outline.
 
 <Canvas of={ButtonFeatures.Disabled} />
 

package/src/system/actions/Button/Button.tsx

@@ -1,14 +1,16 @@
 import { styled, withStaticProperties } from '@tamagui/core';
 import { useProps } from '../../core/hooks/useProps';
+import type { HStackProps } from '../../core/primitives/Stack';
 import { HStack } from '../../core/primitives/Stack';
 import { View } from '../../core/primitives/View';
 import { Loader } from '../../loading/loader/Loader';
+import type { PropsToTamaguiVariants } from '../../types';
 import { ButtonBadge } from './components/ButtonBadge';
 import { ButtonIcon } from './components/ButtonIcon';
 import { ButtonText } from './components/ButtonText';
 import type { ButtonType } from './context';
 import { context } from './context';
-import type { ButtonProps, ButtonTypeStyle } from './types';
+import type { ButtonProps, ButtonTypeStyle, ButtonWithoutMediaProps } from './types';
 
 export const InternalButtonFrame = styled(HStack, {
   name: 'Button',
@@ -44,7 +46,7 @@ export const InternalButtonFrame = styled(HStack, {
         if (disabled) {
           return {
             ...commonTypeStyle,
-            backgroundColor: '$bg.disabled.mid',
+            backgroundColor: '$bg.disabled.hi',
           };
         }
       }
@@ -125,7 +127,7 @@ export const InternalButtonFrame = styled(HStack, {
       },
       false: {},
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<ButtonWithoutMediaProps, HStackProps>,
 });
 
 export const InternalButton = InternalButtonFrame.styleable<ButtonProps, ButtonProps>((props, ref) => {

package/src/system/actions/Button/__snapshots__/Button.features.stories.tsx.snap

@@ -38,7 +38,7 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#ECECEC",
+          "backgroundColor": "#BABABA",
           "borderBottomColor": "transparent",
           "borderBottomLeftRadius": 4,
           "borderBottomRightRadius": 4,
@@ -73,7 +73,7 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
         <Text
           style={
             {
-              "color": "#A8A8A8",
+              "color": "#ffffff",
               "fontFamily": "GTStandardSemibold",
               "fontSize": 16,
               "letterSpacing": 0,
@@ -103,16 +103,16 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "borderBottomColor": "#CDCED0",
+          "borderBottomColor": "#DCDCDC",
           "borderBottomLeftRadius": 4,
           "borderBottomRightRadius": 4,
           "borderBottomWidth": 1,
-          "borderLeftColor": "#CDCED0",
+          "borderLeftColor": "#DCDCDC",
           "borderLeftWidth": 1,
-          "borderRightColor": "#CDCED0",
+          "borderRightColor": "#DCDCDC",
           "borderRightWidth": 1,
           "borderStyle": "solid",
-          "borderTopColor": "#CDCED0",
+          "borderTopColor": "#DCDCDC",
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "borderTopWidth": 1,
@@ -241,16 +241,16 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "borderBottomColor": "#CDCED0",
+          "borderBottomColor": "#DCDCDC",
           "borderBottomLeftRadius": 4,
           "borderBottomRightRadius": 4,
           "borderBottomWidth": 1,
-          "borderLeftColor": "#CDCED0",
+          "borderLeftColor": "#DCDCDC",
           "borderLeftWidth": 1,
-          "borderRightColor": "#CDCED0",
+          "borderRightColor": "#DCDCDC",
           "borderRightWidth": 1,
           "borderStyle": "solid",
-          "borderTopColor": "#CDCED0",
+          "borderTopColor": "#DCDCDC",
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "borderTopWidth": 1,

package/src/system/actions/Button/__snapshots_web__/Button.features.stories.tsx.snap

@@ -22,7 +22,7 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
           >
             <div
               aria-disabled="true"
-              class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-27634925 _backgroundColor-0active-button--bg-27634925 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-flex-start _gap-t-space-spa94482166 _cur-pointer _btc-border--tra718859951 _brc-border--tra718859951 _borderBottomColor-border--tra718859951 _borderLeftColor-border--tra718859951 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _height-48px _paddingRight-16px _paddingLeft-16px _paddingTop-14px _paddingBottom-14px _pe-none _backgroundColor-bg--disable1389045052 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+              class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-27634925 _backgroundColor-0active-button--bg-27634925 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-flex-start _gap-t-space-spa94482166 _cur-pointer _btc-border--tra718859951 _brc-border--tra718859951 _borderBottomColor-border--tra718859951 _borderLeftColor-border--tra718859951 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _height-48px _paddingRight-16px _paddingLeft-16px _paddingTop-14px _paddingBottom-14px _pe-none _backgroundColor-bg--disable93739269 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
               data-disable-theme="true"
               role="button"
               tabindex="-1"
@@ -31,7 +31,7 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
                 class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column"
               >
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _textAlign-left _col-content--di910006857"
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _textAlign-left _col-content--di396036745"
                 >
                   Primary
                 </span>

package/src/system/actions/Button/utils/contentColor.ts

@@ -3,7 +3,7 @@ import type { ButtonType } from '../types';
 
 export function getButtonContentColor(type: ButtonType, disabled?: boolean, isOnContrasted?: boolean): ColorTokens {
   if (disabled) {
-    return '$content.disabled';
+    return type === 'primary' ? '$content.disabled.onContrasted' : '$content.disabled';
   }
 
   switch (type) {

package/src/system/actions/IconButton/IconButton.tsx

@@ -1,7 +1,8 @@
 import { styled, withStaticProperties } from '@tamagui/core';
 import type { ReactNode } from 'react';
 import type { Except } from 'type-fest';
-import type { TamaguiMediaProps } from '../../types';
+import type { ViewProps } from '../../core/primitives/View';
+import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
 import { InternalButton } from '../Button/Button';
 import { ButtonBadge } from '../Button/components/ButtonBadge';
 import { ButtonIcon } from '../Button/components/ButtonIcon';
@@ -31,7 +32,7 @@ export const InternalIconButtonFrame = styled(InternalButton, {
         height: 48,
       },
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<IconButtonWithoutMediaProps, ViewProps>,
 });
 
 function InternalIconButton(props: IconButtonProps): ReactNode {

package/src/system/actions/IconButton/__snapshots__/IconButton.features.stories.tsx.snap

@@ -38,7 +38,7 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#ECECEC",
+          "backgroundColor": "#BABABA",
           "borderBottomColor": "transparent",
           "borderBottomLeftRadius": 4,
           "borderBottomRightRadius": 4,
@@ -73,7 +73,7 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
         }
       >
         <svg
-          color="#A8A8A8"
+          color="#ffffff"
           data-file-name="star.inline.svg"
         />
       </View>
@@ -94,16 +94,16 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "borderBottomColor": "#CDCED0",
+          "borderBottomColor": "#DCDCDC",
           "borderBottomLeftRadius": 4,
           "borderBottomRightRadius": 4,
           "borderBottomWidth": 1,
-          "borderLeftColor": "#CDCED0",
+          "borderLeftColor": "#DCDCDC",
           "borderLeftWidth": 1,
-          "borderRightColor": "#CDCED0",
+          "borderRightColor": "#DCDCDC",
           "borderRightWidth": 1,
           "borderStyle": "solid",
-          "borderTopColor": "#CDCED0",
+          "borderTopColor": "#DCDCDC",
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "borderTopWidth": 1,
@@ -205,16 +205,16 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "borderBottomColor": "#CDCED0",
+          "borderBottomColor": "#DCDCDC",
           "borderBottomLeftRadius": 4,
           "borderBottomRightRadius": 4,
           "borderBottomWidth": 1,
-          "borderLeftColor": "#CDCED0",
+          "borderLeftColor": "#DCDCDC",
           "borderLeftWidth": 1,
-          "borderRightColor": "#CDCED0",
+          "borderRightColor": "#DCDCDC",
           "borderRightWidth": 1,
           "borderStyle": "solid",
-          "borderTopColor": "#CDCED0",
+          "borderTopColor": "#DCDCDC",
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "borderTopWidth": 1,

package/src/system/actions/IconButton/__snapshots_web__/IconButton.features.stories.tsx.snap

@@ -22,7 +22,7 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
           >
             <div
               aria-disabled="true"
-              class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-27634925 _backgroundColor-0active-button--bg-27634925 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-flex-start _gap-t-space-spa94482166 _cur-pointer _btc-border--tra718859951 _brc-border--tra718859951 _borderBottomColor-border--tra718859951 _borderLeftColor-border--tra718859951 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _pe-none _height-48px _paddingRight-14px _paddingLeft-14px _paddingTop-14px _paddingBottom-14px _backgroundColor-bg--disable1389045052 _width-48px _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+              class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-27634925 _backgroundColor-0active-button--bg-27634925 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-flex-start _gap-t-space-spa94482166 _cur-pointer _btc-border--tra718859951 _brc-border--tra718859951 _borderBottomColor-border--tra718859951 _borderLeftColor-border--tra718859951 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _pe-none _height-48px _paddingRight-14px _paddingLeft-14px _paddingTop-14px _paddingBottom-14px _backgroundColor-bg--disable93739269 _width-48px _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
               data-disable-theme="true"
               role="button"
               tabindex="-1"
@@ -31,7 +31,7 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
                 class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
               >
                 <svg
-                  color="var(--content--disabled)"
+                  color="var(--content--disabled--onContrasted)"
                   data-file-name="star.inline.svg"
                 />
               </div>

package/src/system/content/icon/Icon.tsx

@@ -3,9 +3,14 @@ import { styled, useStyle } from '@tamagui/core';
 import type { ReactElement, ReactNode } from 'react';
 import { cloneElement } from 'react';
 import { useProps } from '../../core/hooks/useProps';
+import type { ViewProps } from '../../core/primitives/View';
 import { View } from '../../core/primitives/View';
 import type { BumperIconTokens } from '../../core/tokens/bumperIcon';
-import type { TamaguiMediaProps } from '../../types';
+import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
+
+interface IconContainerVariantProps {
+  size?: BumperIconTokens;
+}
 
 const IconContainer = styled(View, {
   name: 'Icon',
@@ -16,7 +21,7 @@ const IconContainer = styled(View, {
         height: tokens.bumperIcon[iconSize],
       };
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<IconContainerVariantProps, ViewProps>,
 
   defaultVariants: {
     size: '$icon.m',

package/src/system/content/typography/Typography.features.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '../../core/primitives/Stack';
-import type { BodyProps, TypographyTextProps } from './Typography';
+import type { TypographyBodyProps, TypographyTextProps } from './Typography';
 import { Typography } from '.';
 
-const meta: Meta<Extract<TypographyTextProps, BodyProps>> = {
+const meta: Meta<Extract<TypographyTextProps, TypographyBodyProps>> = {
   title: 'Bumper/Content/Typography/Features',
   component: Typography.Text,
 };