npm - @edvisor/product-language - Versions diffs - 0.2.0 → 0.3.0 - Mend

@edvisor/product-language 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/src/lib/components/typography/storybook/typography.stories.mdx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs';
 import { TypographyTable, Button } from './components'
-import { Heading3, Label1, Body } from '../typography'
+import { Heading3, Label, Body } from '../typography'
 <Meta title="Components/Typography" />
@@ -14,7 +14,7 @@ When you are building from a mockup you will be clicking on elements and checkin
 ### Typography: Ag
-When you see text in a mockup you can click that text to see what kind of typographic component it represents. In the typography section of the figma inspector you will see a label Ag with a value like "Label1" or "Label1/emphasis". This is the name of the component you should use, and whether you should set the emphasis flag.
+When you see text in a mockup you can click that text to see what kind of typographic component it represents. In the typography section of the figma inspector you will see a label Ag with a value like "Label Default" or "Label Strong" or "Label Subtle". This is the name of the component you should use, and whether you should set the strong or subtle flag.
 For example if you see "Ag Heading3".
@@ -22,10 +22,12 @@ For example if you see "Ag Heading3".
   <Heading3>Heading 3, no modifiers</Heading3>
 </Canvas>
-If you see "Ag Label 1/emphasis" you should use a Label1 with emphasis set.
+If you see "Ag Label Strong" you should use a Label with strong set.
 <Canvas>
-  <Label1 emphasis>Label 1, emphasis</Label1>
+  <Label>Label default</Label>
+  <Label subtle>Label Subtle</Label>
+  <Label strong>Label Strong</Label>
 </Canvas>
 ### Colors: Text

package/src/lib/components/typography/typography.test.tsx CHANGED Viewed

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react'
+import { FontWeight, LineHeight } from 'foundations/typography/constants'
 import {
   Display,
   Heading1,
   Heading2,
   Heading3,
   Heading4,
-  BodyLarge,
   Body,
+  BodyLarge,
   Caption,
-  Label1,
-  Label2,
+  Label,
 } from './typography'
 describe('Typography', () => {
@@ -20,74 +20,78 @@ describe('Typography', () => {
   })
   it('should render Heading1 successfully', () => {
-    const { baseElement } = render(<Heading1>My Text Here</Heading1>)
-    expect(baseElement).toBeTruthy()
+    render(<Heading1>My Text Here</Heading1>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render Heading2 successfully', () => {
-    const { baseElement } = render(<Heading2>My Text Here</Heading2>)
-    expect(baseElement).toBeTruthy()
+    render(<Heading2>My Text Here</Heading2>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render Heading3 successfully', () => {
-    const { baseElement } = render(<Heading3>My Text Here</Heading3>)
-    expect(baseElement).toBeTruthy()
+    render(<Heading3>My Text Here</Heading3>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render Heading4 successfully', () => {
-    const { baseElement } = render(<Heading4>My Text Here</Heading4>)
-    expect(baseElement).toBeTruthy()
+    render(<Heading4>My Text Here</Heading4>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
-  it('should render BodyLarge successfully', () => {
-    const { baseElement } = render(<BodyLarge>My Text Here</BodyLarge>)
-    expect(baseElement).toBeTruthy()
+  it('should render large successfully', () => {
+    render(<BodyLarge>My Text Here</BodyLarge>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toHaveStyle(`line-height: ${LineHeight.d}`)
+    expect(screen.getByText('My Text Here')).toHaveStyle(`font-weight: ${FontWeight.Regular}`)
   })
   it('should render Body successfully', () => {
-    const { baseElement } = render(<Body>My Text Here</Body>)
-    expect(baseElement).toBeTruthy()
+    render(<Body>My Text Here</Body>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render Subdued successfully', () => {
-    const { baseElement } = render(<Body subdued>My Text Here</Body>)
-    expect(baseElement).toBeTruthy()
+    render(<Body subdued>My Text Here</Body>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render Light successfully', () => {
-    const { baseElement } = render(<Body light>My Text Here</Body>)
-    expect(baseElement).toBeTruthy()
+    render(<Body light>My Text Here</Body>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render White successfully', () => {
-    const { baseElement } = render(<Body onPrimary>My Text Here</Body>)
-    expect(baseElement).toBeTruthy()
+    render(<Body onPrimary>My Text Here</Body>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
   it('should render Caption successfully', () => {
-    const { baseElement } = render(<Caption>My Text Here</Caption>)
-    expect(baseElement).toBeTruthy()
+    render(<Caption>My Text Here</Caption>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
-  it('should render Label1 successfully', () => {
-    const { baseElement } = render(<Label1>My Text Here</Label1>)
-    expect(baseElement).toBeTruthy()
+  it('should render Label successfully', () => {
+    render(<Label>My Text Here</Label>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
   })
-  it('should render Label2 successfully', () => {
-    const { baseElement } = render(<Label2>My Text Here</Label2>)
-    expect(baseElement).toBeTruthy()
+  it('should render Label Strong successfully', () => {
+    render(<Label strong>My Text Here</Label>)
     expect(screen.getByText('My Text Here')).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toHaveStyle(`line-height: ${LineHeight.b}`)
+    expect(screen.getByText('My Text Here')).toHaveStyle(`font-weight: ${FontWeight.Medium}`)
   })
 })

package/src/lib/components/typography/typography.tsx CHANGED Viewed

@@ -1,57 +1,99 @@
-import { Typography, ITextProps, Margin } from '@foundations'
-import { PropsWithChildren } from '@helpers'
+import { HTMLAttributes } from 'react'
 import styled from 'styled-components'
+import { Typography, Margin, IBodyProps, ILabelProps } from '@foundations'
+import { FC, PropsWithChildren } from '@helpers'
+import { ITextAspectProps, ITransientTextAspectProps } from 'foundations/typography/text-aspect-flags'
-type Semibold = { semibold?: boolean }
-type Regular = { regular?: boolean }
-type Medium = { medium?: boolean }
+export type ITextComponentProps = ITextAspectProps & { emphasis?: boolean } & HTMLAttributes<HTMLElement> & PropsWithChildren
+type ITransientTextComponentProps = ITransientTextAspectProps & { $emphasis?: boolean } & HTMLAttributes<HTMLElement>
-type ITextComponentProps = ITextProps & PropsWithChildren
+function toTransientProps (props: ITextComponentProps): ITransientTextComponentProps {
+  const { onCritical, onPrimary, emphasis, children, ...rest } = props
+  return {
+    ...rest,
+    $onCritical: onCritical,
+    $onPrimary: onPrimary,
+    $emphasis: emphasis,
+  } as unknown as ITransientTextComponentProps
+}
-export const Display = styled.div<ITextComponentProps & Regular>`
+const DISPLAY = styled.div<ITransientTextComponentProps>`
   ${Typography.Display};
 `
-export const Heading1 = styled.h1<ITextComponentProps & Semibold>`
+export const Display: FC<ITextComponentProps> = (props) => {
+  return <DISPLAY {...toTransientProps(props)}>{props.children}</DISPLAY>
+}
+const HEADING1 = styled.h1<ITransientTextComponentProps>`
   ${Typography.Heading1};
   margin: ${Margin.none};
   margin-bottom: ${Margin.l};
 `
-export const Heading2 = styled.h2<ITextComponentProps & Semibold>`
+export const Heading1: FC<ITextComponentProps> = (props) => {
+  return <HEADING1 {...toTransientProps(props)}>{props.children}</HEADING1>
+}
+const HEADING2 = styled.h2<ITransientTextComponentProps>`
   ${Typography.Heading2};
   margin: ${Margin.none};
   margin-bottom: ${Margin.m};
 `
-export const Heading3 = styled.h3<ITextComponentProps & Semibold>`
+export const Heading2: FC<ITextComponentProps> = (props) => {
+  return <HEADING2 {...toTransientProps(props)}>{props.children}</HEADING2>
+}
+const HEADING3 = styled.h3<ITransientTextComponentProps>`
   ${Typography.Heading3};
   margin: ${Margin.none};
   margin-bottom: ${Margin.l};
 `
-export const Heading4 = styled.h4<ITextComponentProps & Semibold>`
+export const Heading3: FC<ITextComponentProps> = (props) => {
+  return <HEADING3 {...toTransientProps(props)}>{props.children}</HEADING3>
+}
+const HEADING4 = styled.h4<ITransientTextComponentProps>`
   ${Typography.Heading4};
   margin: ${Margin.none};
   margin-bottom: ${Margin.m};
 `
-export const BodyLarge = styled.div<ITextComponentProps & Regular & Semibold>`
+export const Heading4: FC<ITextComponentProps> = (props) => {
+  return <HEADING4 {...toTransientProps(props)}>{props.children}</HEADING4>
+}
+export const BODY_LARGE = styled.div<ITransientTextComponentProps & IBodyProps>`
   ${Typography.BodyLarge};
 `
-export const Body = styled.div<ITextComponentProps & Regular & Medium>`
+export const BodyLarge: FC<ITextComponentProps & IBodyProps> = (props) => {
+  return <BODY_LARGE {...toTransientProps(props)}>{props.children}</BODY_LARGE>
+}
+export const BODY = styled.div<ITransientTextComponentProps & IBodyProps>`
   ${Typography.Body};
 `
-export const Caption = styled.div<ITextComponentProps & Regular>`
+export const Body: FC<ITextComponentProps & IBodyProps> = (props) => {
+  return <BODY {...toTransientProps(props)}>{props.children}</BODY>
+}
+export const CAPTION = styled.div<ITransientTextComponentProps>`
   ${Typography.Caption};
 `
-export const Label1 = styled.div<ITextComponentProps & Regular & Medium>`
-  ${Typography.Label1};
+export const Caption: FC<ITextComponentProps> = (props) => {
+  return <CAPTION {...toTransientProps(props)}>{props.children}</CAPTION>
+}
+export const LABEL = styled.div<ITransientTextComponentProps & ILabelProps>`
+  ${Typography.Label};
 `
-export const Label2 = styled.div<ITextComponentProps & Regular>`
-  ${Typography.Label2};
-`
+export const Label: FC<ITextComponentProps & ILabelProps> = (props) => {
+  return <LABEL {...toTransientProps(props)}>{props.children}</LABEL>
+}

package/src/lib/foundations/color-system/base-palette/base-palette.ts CHANGED Viewed

@@ -65,7 +65,6 @@ export const RED = {
   100: '#FEE2E2',
   200: '#FECACA',
   300: '#FCA5A5', // @TODO we should update the current structure with the figma updates
-  3300: '#FEF6F6',
   400: '#F87171',
   500: '#EF4444',
   600: '#DC2626',

package/src/lib/foundations/color-system/color-guidelines/color-guidelines.ts CHANGED Viewed

@@ -135,6 +135,7 @@ export const Actions = {
     Default: BLUE[600],
     Hover: BLUE[700],
     Pressed: BLUE[800],
+    Depressed: BLUE[900],
     Disabled: DisabledGray,
   },
   Secondary: {
@@ -146,14 +147,14 @@ export const Actions = {
   },
   Critical: {
     Default: RED[600],
-    Hover: RED[500],
-    Pressed: RED[700],
+    Hover: RED[700],
+    Pressed: RED[800],
     Disabled: DisabledGray,
   },
   SecondaryCritical: {
     Default: WHITE,
-    Hover: RED[500],
-    Pressed: RED[700],
+    Hover: RED[700],
+    Pressed: RED[800],
     Disabled: DisabledGray,
   },
 }

package/src/lib/foundations/color-system/components/color-sample.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { FC, Hex, isDefined } from '@helpers'
 import { Flex, SpaceBetween } from '@components'
 import { GRAY, WHITE } from '../base-palette'
-import { Caption, Label1 } from 'components/typography'
+import { Caption, Label } from 'components/typography'
 import { Margin } from '../../spacing'
 function isPale (color: string) {
@@ -68,7 +68,7 @@ const Details = styled(Flex)`
   justify-content: center;
 `
-const ColorName = styled(Label1)`
+const ColorName = styled(Label)`
   white-space: nowrap;
   margin-bottom: ${Margin.xxxs};
 `
@@ -91,7 +91,7 @@ export const ColorSquare: FC<IColorSquareProps> = (props) => {
     <ColorFrame>
       <SquareColorSample color={props.hex} border={props.border} />
       <Details column>
-        <ColorName emphasis>{props.name}</ColorName>
+        <ColorName strong>{props.name}</ColorName>
         <ColorId subdued>{props.colorId}</ColorId>
       </Details>
     </ColorFrame>

package/src/lib/foundations/typography/fonts.ts ADDED Viewed

@@ -0,0 +1,205 @@
+export const InterFontFace = `
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+`

package/src/lib/foundations/typography/text-aspect-flags.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { bitwiseOr, MappedEnum, PropsWithChildren, RequireOnlyOne } from '@helpers'
+import { bitwiseOr, isDefined, MappedEnum, PropsWithChildren, RequireOnlyOne } from '@helpers'
 import { Text } from '../color-system'
 export const enum TextAspects {
@@ -37,7 +37,14 @@ const TextAspectColors = {
 export type ITextAspectProps = Partial<RequireOnlyOne<TextOptions<boolean>>> & PropsWithChildren
-export function getTextAspect(props: ITextAspectProps) {
+export type TransientTextOptions = Omit<TextOptions<boolean>, 'onCritical' | 'onPrimary'> & {
+  $onCritical?: boolean
+  $onPrimary?: boolean
+}
+export type ITransientTextAspectProps = Partial<RequireOnlyOne<TransientTextOptions>> & PropsWithChildren
+export function getTextAspect(props: ITextAspectProps & ITransientTextAspectProps) {
   return TextAspectColors[
     toTextAspect(
       bitwiseOr([
@@ -46,8 +53,8 @@ export function getTextAspect(props: ITextAspectProps) {
         props.light,
         props.critical,
         props.success,
-        props.onPrimary,
-        props.onCritical,
+        isDefined(props.onPrimary) ? props.onPrimary : props.$onPrimary,
+        isDefined(props.onCritical) ? props.onCritical : props.$onCritical,
       ])
     )
   ]