@ornikar/bumper 2.8.0 → 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0

package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap

@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Icon/Features Colors 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            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="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                base.hi
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--base--mid)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                base.mid
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--base--low)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                base.low
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--accent)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                accent
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--success)"
+                  data-file-name="check-circle.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                success
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--warning)"
+                  data-file-name="warning.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                warning
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--danger)"
+                  data-file-name="warning.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                danger
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--info)"
+                  data-file-name="info.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                info
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/Icon/Features Sizes 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            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="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385413 _height-t-size-size1385413"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                16
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                20
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _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"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                24
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385471 _height-t-size-size1385471"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                32
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                48
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385566"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <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-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                64
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/icon/__snapshots_web__/Icon.stories.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Icon Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+          >
+            <svg
+              color="var(--content--base--hi)"
+              data-file-name="star.inline.svg"
+            />
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -1,6 +1,5 @@
-import type { GetProps, GetThemeValueForKey, TamaguiComponent, WithMediaProps } from '@tamagui/core';
+import type { ColorTokens, GetProps, GetThemeValueForKey, TamaguiComponent, WithMediaProps } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
-import { createContext, useContext } from 'react';
 import { type Except } from 'type-fest';
 import type {
   BodyFontVariants,
@@ -9,7 +8,18 @@ import type {
   HeadingFontVariants,
   LabelFontVariants,
 } from '../../core/tokens/fonts';
+import { TypographyIcon } from './TypographyIcon';
 import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
+import {
+  TypograhyColorContext,
+  TypographyContext,
+  TypographyVariantContext,
+  TypographyWeightContext,
+  useTypographyColor,
+  useTypographyContext,
+  useTypographyVariant,
+  useTypographyWeight,
+} from './utils/typographyContext';
 
 // Should use type from tamagui (PropsWithoutMediaStyles) when fixed: https://github.com/tamagui/tamagui/pull/3783
 type PropsWithoutMedia<A> = {
@@ -55,14 +65,6 @@ const InternalTypography = styled(Text, {
 
 export type InternalTypographyProps = GetProps<typeof InternalTypography>;
 
-export type TypographyVariantContextValue = FontVariants | null;
-export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
-export type TypograhyColorContextValue = InternalTypographyProps['color'] | null;
-
-const TypographyVariantContext = createContext<TypographyVariantContextValue>(null);
-const TypographyWeightContext = createContext<TypographyWeightContextValue>(null);
-const TypograhyColorContext = createContext<TypograhyColorContextValue>(null);
-
 // Remove font-related style props from InternalTypography Props
 type TypographyExcludedFontStyleProps =
   | 'fontFamily'
@@ -70,9 +72,12 @@ type TypographyExcludedFontStyleProps =
   | 'lineHeight'
   | 'fontStyle'
   | 'fontVariant'
-  | 'fontWeight';
+  | 'fontWeight'
+  | 'color';
 
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps>;
+type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
+  color: ColorTokens;
+};
 
 export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
   variant?: BodyFontVariants;
@@ -93,9 +98,10 @@ export type TypographyTextProps =
   | OverrideTamaguiComponentProps<ContentCapsProps>;
 
 const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
-  const typographyVariantAncestorValue = useContext(TypographyVariantContext);
-  const typographyWeightAncestorValue = useContext(TypographyWeightContext);
-  const typographyColorAncestorValue = useContext(TypograhyColorContext);
+  const typographyVariantAncestorValue = useTypographyVariant();
+  const typographyWeightAncestorValue = useTypographyWeight();
+  const typographyColorAncestorValue = useTypographyColor();
+  const typographyContext = useTypographyContext();
 
   const { variant, weight } = getVariantAndWeightValues(
     props.weight,
@@ -115,6 +121,8 @@ const TypographyBase = InternalTypography.styleable<TypographyTextProps, Typogra
     />
   );
 
+  content = typographyContext ? content : <TypographyContext.Provider value>{content}</TypographyContext.Provider>;
+
   // If a variant is provided, we set it in the context for children to be able to inherit variant value
   content = props.variant ? (
     <TypographyVariantContext.Provider value={props.variant}>{content}</TypographyVariantContext.Provider>
@@ -153,4 +161,5 @@ export const Typography = {
   Header4: createHeading(4),
   Header5: createHeading(5),
   Header6: createHeading(6),
+  Icon: TypographyIcon,
 };

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

@@ -0,0 +1,163 @@
+import {
+  CheckCircleRegularIcon,
+  InfoRegularIcon,
+  StarRegularIcon,
+  WarningRegularIcon,
+} from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HStack, VStack } from '../../core/primitives/Stack';
+import { Typography } from './Typography';
+import { TypographyIcon } from './TypographyIcon';
+
+const meta: Meta<typeof TypographyIcon> = {
+  title: 'Bumper/Content/TypographyIcon/Features',
+  component: TypographyIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithExplicitColor: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.24" color="$content.accent" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit accent
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.24" color="$content.success" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit success
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.warning" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit warning
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.danger" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit danger
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const InheritFromTypography: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits accent color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> This icon inherits the accent color
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits success color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" /> Operation completed successfully
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits danger color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.danger">
+          <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" /> Error: Something went wrong
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits warning color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.warning">
+          <TypographyIcon icon={<InfoRegularIcon />} size="$size.20" /> Warning: Please review this item
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const OverrideInheritedColor: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Typography is accent, but icon explicitly uses success color
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.accent">
+          <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" color="$content.success" /> Icon overrides
+          inherited color
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Typography is success, but icon explicitly uses danger color
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" color="$content.danger" /> Mixed color scenario
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const DifferentSizes: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="heading-l" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.32" /> Large heading with size 32 icon
+      </Typography.Text>
+      <Typography.Text variant="body-m" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Body text with size 20 icon
+      </Typography.Text>
+      <Typography.Text variant="body-s" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.16" /> Small text with size 16 icon
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const NestedTypographyInheritance: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Nested Typography components - icon inherits from parent
+        </Typography.Text>
+        <Typography.Text variant="body-l" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent text with icon
+          <Typography.Text variant="body-m">
+            <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Nested text - icon inherits parent
+            color
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Nested with override - child overrides parent color
+        </Typography.Text>
+        <Typography.Text variant="body-l" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent accent color
+          <Typography.Text variant="body-m" color="$content.success">
+            <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Child overrides to success
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};

package/src/system/content/typography/TypographyIcon.stories.tsx

@@ -0,0 +1,52 @@
+import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TypographyIcon } from './TypographyIcon';
+
+const meta: Meta<typeof TypographyIcon> = {
+  title: 'Bumper/Content/TypographyIcon',
+  component: TypographyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: false,
+      description: 'The icon element to render',
+    },
+    size: {
+      control: 'select',
+      options: ['$size.16', '$size.20', '$size.24', '$size.32', '$size.48', '$size.64', '$size.80', '$size.96'],
+      description: 'Icon size (uses size tokens)',
+    },
+    color: {
+      control: 'select',
+      options: [
+        '$content.base.low',
+        '$content.base.mid',
+        '$content.base.hi',
+        '$content.base.onContrasted.low',
+        '$content.base.onContrasted.mid',
+        '$content.base.onContrasted.hi',
+        '$content.accent',
+        '$content.promo',
+        '$content.promo.onContrasted',
+        '$content.info',
+        '$content.success',
+        '$content.warning',
+        '$content.danger',
+        '$content.muted',
+        '$content.disabled',
+        '$content.disabled.onContrasted',
+      ],
+      description: 'Icon color (semantic theme token). When omitted, inherits from parent Typography context.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <StarRegularIcon />,
+    size: '$size.20',
+  },
+};