@ornikar/bumper 3.9.1 → 3.10.0

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
 
@@ -179,12 +179,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 +204,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 +216,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,9 +310,9 @@ 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`.
+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**: 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`).
+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.
 
@@ -464,8 +486,8 @@ 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

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

@@ -44,7 +44,7 @@ export const InternalButtonFrame = styled(HStack, {
         if (disabled) {
           return {
             ...commonTypeStyle,
-            backgroundColor: '$bg.disabled.mid',
+            backgroundColor: '$bg.disabled.hi',
           };
         }
       }

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/__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/core/themes/light/__snapshots__/light.stories.tsx.snap

@@ -1207,7 +1207,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#ECECEC",
+              "backgroundColor": "#ffffff",
               "borderBottomColor": "#F1ECE4",
               "borderBottomLeftRadius": 4,
               "borderBottomRightRadius": 4,
@@ -1230,7 +1230,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           <View
             style={
               {
-                "backgroundColor": "#ffffff",
+                "backgroundColor": "#563B56",
                 "borderBottomLeftRadius": 2,
                 "borderBottomRightRadius": 2,
                 "borderTopLeftRadius": 2,
@@ -1278,7 +1278,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           }
           suppressHighlighting={true}
         >
-          #ECECEC
+          #ffffff
         </Text>
       </View>
       <View
@@ -3119,7 +3119,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#A8A8A8",
+              "backgroundColor": "#BABABA",
               "borderBottomColor": "#F1ECE4",
               "borderBottomLeftRadius": 4,
               "borderBottomRightRadius": 4,
@@ -3176,7 +3176,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           }
           suppressHighlighting={true}
         >
-          #A8A8A8
+          #BABABA
         </Text>
       </View>
       <View
@@ -4023,7 +4023,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#CDCED0",
+              "backgroundColor": "#DCDCDC",
               "borderBottomColor": "#F1ECE4",
               "borderBottomLeftRadius": 4,
               "borderBottomRightRadius": 4,
@@ -4080,7 +4080,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           }
           suppressHighlighting={true}
         >
-          #CDCED0
+          #DCDCDC
         </Text>
       </View>
       <View

package/src/system/core/themes/light/__snapshots_web__/light.stories.tsx.snap

@@ -363,10 +363,10 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
               >
                 <div
-                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-ECECEC35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-ffffff35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                 >
                   <div
-                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-bg--base--l872590407"
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-bg--accent-1633109644"
                   />
                 </div>
                 <div
@@ -381,7 +381,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 <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-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _textAlign-left _col-content--ba1918259606"
                 >
-                  #ECECEC
+                  #ffffff
                 </span>
               </div>
               <div
@@ -913,7 +913,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
               >
                 <div
-                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-A8A8A835 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-BABABA35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                 />
                 <div
                   class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-280px"
@@ -927,7 +927,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 <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-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _textAlign-left _col-content--ba1918259606"
                 >
-                  #A8A8A8
+                  #BABABA
                 </span>
               </div>
               <div
@@ -1173,7 +1173,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
               >
                 <div
-                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-CDCED035 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-DCDCDC35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                 />
                 <div
                   class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-280px"
@@ -1187,7 +1187,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 <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-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _textAlign-left _col-content--ba1918259606"
                 >
-                  #CDCED0
+                  #DCDCDC
                 </span>
               </div>
               <div